diff --git a/README.md b/README.md index 0bdd1d3b..6d9633a5 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ - https://oplayer.vercel.app - https://ohplayer.netlify.app -- [Standalone Demo](https://oplayer.vercel.app/ohls.html?src=https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8) +- [Standalone Demo](https://oplayer.vercel.app/ohls.html?playlist=%5B%7B"title"%3A"Disney%27s+Oceans+-+MP4"%2C"src"%3A"%2F%2Fvjs.zencdn.net%2Fv%2Foceans.mp4"%2C"poster"%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) ## Who use OPlayer? diff --git a/examples/standalone/main.ts b/examples/standalone/main.ts index b8c2f07e..22b46d83 100644 --- a/examples/standalone/main.ts +++ b/examples/standalone/main.ts @@ -144,14 +144,22 @@ const player = Player.make('#player', { src: '//', duration: '00:00' }, + { + title: "Disney's Oceans - MP4", + src: '//vjs.zencdn.net/v/oceans.mp4', + poster: '//vjs.zencdn.net/v/oceans.png', + duration: '00:46' + }, { title: 'Big Buck Bunny - HLS', src: 'https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8', + poster: 'https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/bbb.png', duration: '10:34' }, { - title: 'DASH', + title: 'Big Buck Bunny - DASH', src: 'https://dash.akamaized.net/akamai/bbb_30fps/bbb_30fps.mpd', + poster: 'https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/bbb.png', duration: '10:34' }, { @@ -191,13 +199,14 @@ function stopLoad() { let src: string = player.context.playlist.options.sources[initialIndex].src -const actions = () => html`

- (src = e.target.value)} style="width:100%;" .value=${live(src)} /> +const actions = () => + html`

+ (src = e.target.value)} style="width:100%;" .value=${live(src)} /> - + - -

` + +

` render(actions(), document.getElementById('actions')!) diff --git a/packages/docs/public/ohls.html b/packages/docs/public/ohls.html index a1df5006..95f2a58c 100644 --- a/packages/docs/public/ohls.html +++ b/packages/docs/public/ohls.html @@ -126,7 +126,7 @@ builder({ ...e, message: - e.message + '\n' + 'Open an issues https://github.com/shiyiya/oplayer/issues/new/choose' + e.message || '' + '\n' + 'Open an issues https://github.com/shiyiya/oplayer/issues/new/choose' }) } }) @@ -141,7 +141,7 @@ ] ] - if (/m3u8(#|\?|$)/.test(src) || playlist.some((it) => /m3u8(#|\?|$)/.test(it))) { + if (/m3u8(#|\?|$)/.test(src) || playlist.some((it) => /m3u8(#|\?|$)/.test(it.src))) { deps.push([ hlsScriptCdn, () => { @@ -150,6 +150,18 @@ ]) } + if (/.mpd(#|\?|$)/i.test(src) || playlist.some((it) => /.mpd(#|\?|$)/i.test(it.src))) { + deps.push(['https://cdn.jsdelivr.net/npm/@oplayer/dash@latest/dist/index.min.js', () => {}]) + deps.push([ + 'http://cdn.dashjs.org/latest/dash.all.min.js', + () => { + const dash = ODash() + dash.constructor.library = dashjs + plugins.push(dash) + } + ]) + } + if (playlist.length) { deps.push([ playlistScriptCdn,