redefine ui config & center seekbar (#119)

* breakchange: redefine ui config * try fix ios subtitle * fix(style): video fullscreen feat(playlist): support danmaku
shiyiya · Mar 23, 2024 · fa721e7 · fa721e7
1 parent 9cb5e7e
commit fa721e7
Show file tree

Hide file tree

Showing 37 changed files with 938 additions and 856 deletions.
diff --git a/README.md b/README.md
@@ -2,18 +2,30 @@
 
 ⚡ Oh! Another HTML5 video player.
 
+[Documentation](https://oplayer.vercel.app) |
+[Donate](#support) | [Checkout the demo](https://oplayer.vercel.app/ohls.html?playlist=%5B%7B"title"%3A"Disney%27s+Oceans+-+MP4"%2C"src"%3A"https%3A%2F%2Fvjs.zencdn.net%2Fv%2Foceans.mp4"%2C"poster"%3A"https%3A%2F%2Fvjs.zencdn.net%2Fv%2Foceans.png"%2C"duration"%3A"00%3A46"%7D%2C%7B"title"%3A"Big+Buck+Bunny+-+HLS"%2C"src"%3A"https%3A%2F%2Ftest-streams.mux.dev%2Fx36xhzz%2Fx36xhzz.m3u8"%2C"poster"%3A"https%3A%2F%2Fd2zihajmogu5jn.cloudfront.net%2Fbig-buck-bunny%2Fbbb.png"%2C"duration"%3A"10%3A34"%7D%2C%7B"title"%3A"Big+Buck+Bunny+-+DASH"%2C"src"%3A"https%3A%2F%2Fdash.akamaized.net%2Fakamai%2Fbbb_30fps%2Fbbb_30fps.mpd"%2C"poster"%3A"https%3A%2F%2Fd2zihajmogu5jn.cloudfront.net%2Fbig-buck-bunny%2Fbbb.png"%2C"duration"%3A"10%3A34"%7D%5D)
+
 [![npm](https://img.shields.io/npm/v/@oplayer/core?style=flat-square)](https://www.npmjs.com/package/@oplayer/core)
 [![npm dt](https://img.shields.io/npm/dm/@oplayer/core?style=flat-square)](https://www.npmjs.com/package/@oplayer/core)
 [![jsdelivr](https://data.jsdelivr.com/v1/package/npm/@oplayer/core/badge)](https://www.jsdelivr.com/package/npm/@oplayer/core)
 [![Discord](https://img.shields.io/discord/1017615537234264185.svg?label=&logo=discord&logoColor=fff&color=7389D8&labelColor=6A7EC2&style=flat-square)](https://discord.gg/hzjxYyPbKh)
 
 ![oplayer](./oplayer.png)
 
-## Documentation
+## Feature
 
-- https://oplayer.vercel.app
-- https://ohplayer.netlify.app
-- [Standalone Demo](https://oplayer.vercel.app/ohls.html?playlist=%5B%7B"title"%3A"Disney%27s+Oceans+-+MP4"%2C"src"%3A"https%3A%2F%2Fvjs.zencdn.net%2Fv%2Foceans.mp4"%2C"poster"%3A"https%3A%2F%2Fvjs.zencdn.net%2Fv%2Foceans.png"%2C"duration"%3A"00%3A46"%7D%2C%7B"title"%3A"Big+Buck+Bunny+-+HLS"%2C"src"%3A"https%3A%2F%2Ftest-streams.mux.dev%2Fx36xhzz%2Fx36xhzz.m3u8"%2C"poster"%3A"https%3A%2F%2Fd2zihajmogu5jn.cloudfront.net%2Fbig-buck-bunny%2Fbbb.png"%2C"duration"%3A"10%3A34"%7D%2C%7B"title"%3A"Big+Buck+Bunny+-+DASH"%2C"src"%3A"https%3A%2F%2Fdash.akamaized.net%2Fakamai%2Fbbb_30fps%2Fbbb_30fps.mpd"%2C"poster"%3A"https%3A%2F%2Fd2zihajmogu5jn.cloudfront.net%2Fbig-buck-bunny%2Fbbb.png"%2C"duration"%3A"10%3A34"%7D%5D)
+- **Streaming** - support for [hls.js](https://oplayer.vercel.app/plugins/hls), [flv,mpegts](https://oplayer.vercel.app/plugins/mpegts), [webtorrent](https://oplayer.vercel.app/plugins/torrent), [dash.js](https://oplayer.vercel.app/plugins/dash) and any other custom streaming playback
+- **Fullscreen** - supports native fullscreen with fallback to "full window" modes
+- **Shortcuts** - supports keyboard shortcuts
+- **Picture-in-Picture** - supports picture-in-picture mode
+- **Multiple captions** - support for multiple caption tracks(SRT, WEBVTT)
+- **i18n support** - support for internationalization of controls
+- **Preview thumbnails** - support for displaying preview thumbnails (spirit or [vtt](https://oplayer.vercel.app/plugins/vtt-thumbnails))
+- **No frameworks** - written in "vanilla" JavaScript, no dependencies required
+- **[Chromecast](https://oplayer.vercel.app/plugins/chromecast)** - cast video to your device
+- **[Playlist](https://oplayer.vercel.app/plugins/playlist)** - supports playlist list ui
+- **[Danmaku](./packages/danmaku/)** - biu biu biu ~
+- **... and much more!**
 
 ## Who use OPlayer?
 
@@ -22,29 +34,10 @@
 - [Animex](https://www.animex.live/) : Watch Anime for free in HD quality with English subbed or dubbed.
 - ~~[NGEWIBU.TV](https://ngewibu.tv/) : Nonton Anime Sub Indo | Nonton Anime Subtitle Indonesia Gratis~~
 
-## Feature
-
-- Streaming formats
-  - [HLS](./packages/hls) (track, subtitles, audio track selection)
-  - [MPEG DASH](./packages/dash) (track, subtitles (also segmented), audio track selection)
-  - [FLV](./packages/mpegts)
-  - [WebTorrent](./packages/torrent)
-  - Any other custom streaming formats
-- Features
-  - Danmaku
-  - Screenshot
-  - Hotkeys
-  - Thumbnails (spirit or [vtt](https://oplayer.vercel.app/plugins/vtt-thumbnails))
-  - Subtitles (formats: SRT, WEBVTT with HTML tags support; subtitles from HLS; multiple subtitles for video)
-  - [Chromecast](https://oplayer.vercel.app/plugins/chromecast)
-  - [Playlist](https://oplayer.vercel.app/plugins/playlist)
-  - ... and much more!
-
 ## Support
 
 If you think this is super cool, or useful, and want to donate a little, then you are also super cool!
 
-- PR WELCOME ！
 - [Paypal](https://www.paypal.com/paypalme/ShiYiYa)
 - [WeChat Pay](https://www.oaii.me/wechat_donate.png)
 

diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts
@@ -15,7 +15,7 @@ import POSTER from '../../packages/docs/public/poster.png'
 import THUMB from '../../packages/docs/public/thumbnails.jpg'
 import SRT from '../../packages/docs/public/君の名は.srt'
 import JPSRT from '../../packages/docs/public/君の名は-jp.srt'
-// import SUPER_DANMAKU from '../../packages/docs/public/天气之子.xml'
+import SUPER_DANMAKU from '../../packages/docs/public/天气之子.xml'
 import FLV from '../../packages/docs/public/op.flv'
 import MP4 from '../../packages/docs/public/君の名は.mp4'
 import vercel from '../../packages/docs/public/vercel.svg'
@@ -66,15 +66,20 @@ const player = Player.make<Ctx>('#player', {
             class: 'watermark',
             crossOrigin: 'anonymous'
           }
+        },
+        primaryColor: '#6668ab',
+        progress: {},
+        controller: {
+          setting: 'auto',
+          display: 'always',
+          coverButton: true,
+          displayBehavior: 'hover',
+          header: { back: 'always' },
+          slideToSeek: 'always'
         }
       },
-      controlBar: { back: 'always' },
-      topSetting: isMobile,
-      slideToSeek: 'always',
-      // miniProgressBar: false,
       // autoFocus: true,
       keyboard: { global: true },
-      // speed: [],
       screenshot: true,
       settings: ['loop'],
       pictureInPicture: true,
@@ -106,6 +111,7 @@ const player = Player.make<Ctx>('#player', {
           poster: POSTER,
           src: MP4,
           duration: '01:32',
+          danmaku: SUPER_DANMAKU,
           thumbnails: {
             src: THUMB,
             number: 100
@@ -140,8 +146,9 @@ const player = Player.make<Ctx>('#player', {
           duration: '10:34'
         },
         {
-          title: 'BROKEN SOURCE',
+          title: 'BROKEN SOURCE & POSTER',
           src: '//',
+          poster: '//',
           duration: '00:00'
         },
         {