diff --git a/demo/index.html b/demo/index.html index eb391f9..e72d47d 100644 --- a/demo/index.html +++ b/demo/index.html @@ -113,10 +113,12 @@ video: { quality: [{ name: 'HD', - url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4?1' + url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8', + type: 'hls' }, { name: 'SD', - url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4?2' + url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4', + type: 'normal' }], defaultQuality: 0, pic: 'http://devtest.qiniudn.com/若能绽放光芒.png' @@ -137,6 +139,15 @@ } }); +
+

FLV support

@@ -151,6 +162,18 @@ } }); +
+

Bilibili video and danmaku

diff --git a/src/DPlayer.js b/src/DPlayer.js index f15ac3d..2ce416a 100644 --- a/src/DPlayer.js +++ b/src/DPlayer.js @@ -792,7 +792,7 @@ class DPlayer { }); } - this.initVideo(); + this.initVideo(this.video, this.quality && this.quality.type || this.option.video.type); index++; } @@ -941,42 +941,35 @@ class DPlayer { } } - initVideo () { + initVideo (video, type) { + this.type = type; + if (this.type === 'auto') { + if (/m3u8(#|\?|$)/i.exec(video.src)) { + this.type = 'hls'; + } + else if (/.flv(#|\?|$)/i.exec(video.src)) { + this.type = 'flv'; + } + else { + this.type = 'normal'; + } + } + // Support HTTP Live Streaming - let enablehls; - if (this.option.video.type === 'auto') { - enablehls = /m3u8(#|\?|$)/i.exec(this.video.src); - } - else if (this.option.video.type === 'hls') { - enablehls = true; - } - else { - enablehls = false; - } - if (enablehls && Hls.isSupported()) { + if (this.type === 'hls' && Hls.isSupported()) { // this.element.getElementsByClassName('dplayer-time')[0].style.display = 'none'; const hls = new Hls(); - hls.loadSource(this.video.src); - hls.attachMedia(this.video); + hls.loadSource(video.src); + hls.attachMedia(video); } // Support FLV - let enableflv; - if (this.option.video.type === 'auto') { - enableflv = /.flv(#|\?|$)/i.exec(this.video.src); - } - else if (this.option.video.type === 'flv') { - enableflv = true; - } - else { - enableflv = false; - } - if (enableflv && flvjs.isSupported()) { + if (this.type === 'flv' && flvjs.isSupported()) { const flvPlayer = flvjs.createPlayer({ type: 'flv', - url: this.option.video.url + url: video.src }); - flvPlayer.attachMediaElement(this.video); + flvPlayer.attachMediaElement(video); flvPlayer.load(); } @@ -984,32 +977,32 @@ class DPlayer { * video events */ // show video time: the metadata has loaded or changed - this.video.addEventListener('durationchange', () => { - if (this.video.duration !== 1) { // compatibility: Android browsers will output 1 at first - this.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = utils.secondToTime(this.video.duration); + video.addEventListener('durationchange', () => { + if (video.duration !== 1) { // compatibility: Android browsers will output 1 at first + this.element.getElementsByClassName('dplayer-dtime')[0].innerHTML = utils.secondToTime(video.duration); } }); // show video loaded bar: to inform interested parties of progress downloading the media - this.video.addEventListener('progress', () => { - const percentage = this.video.buffered.length ? this.video.buffered.end(this.video.buffered.length - 1) / this.video.duration : 0; + video.addEventListener('progress', () => { + const percentage = video.buffered.length ? video.buffered.end(video.buffered.length - 1) / video.duration : 0; this.updateBar('loaded', percentage, 'width'); }); // video download error: an error occurs - this.video.addEventListener('error', () => { + video.addEventListener('error', () => { this.tran && this.notice && this.notice(this.tran('This video fails to load'), -1); this.trigger && this.trigger('pause'); }); // video can play: enough data is available that the media can be played - this.video.addEventListener('canplay', () => { + video.addEventListener('canplay', () => { this.trigger('canplay'); }); // video end this.ended = false; - this.video.addEventListener('ended', () => { + video.addEventListener('ended', () => { this.updateBar('played', 1, 'width'); if (!this.loop) { this.ended = true; @@ -1018,20 +1011,20 @@ class DPlayer { } else { this.seek(0); - this.video.play(); + video.play(); } if (this.danmaku) { this.danmaku.danIndex = 0; } }); - this.video.addEventListener('play', () => { + video.addEventListener('play', () => { if (this.paused) { this.play(); } }); - this.video.addEventListener('pause', () => { + video.addEventListener('pause', () => { if (!this.paused) { this.pause(); } @@ -1059,7 +1052,7 @@ class DPlayer { parent.insertBefore(videoEle, parent.getElementsByTagName('div')[0]); this.prevVideo = this.video; this.video = videoEle; - this.initVideo(); + this.initVideo(this.video, this.quality.type || this.option.video.type); this.seek(this.prevVideo.currentTime); this.notice(`${this.tran('Switching to')} ${this.quality.name} ${this.tran('quality')}`, -1); this.video.addEventListener('canplay', () => { diff --git a/src/DPlayer.scss b/src/DPlayer.scss index 896fbba..9394e20 100644 --- a/src/DPlayer.scss +++ b/src/DPlayer.scss @@ -376,10 +376,8 @@ .dplayer-bar-preview { position: absolute; - // width: 160px; - // height: 80px; - // top: -80px; background: #fff; + pointer-events: none; &.hidden { visibility: hidden; @@ -391,6 +389,7 @@ width: 100%; height: 100%; z-index: 1; + pointer-events: none; } .dplayer-bar-time { @@ -412,6 +411,7 @@ word-wrap: normal; word-break: normal; z-index: 2; + pointer-events: none; } .dplayer-bar { diff --git a/src/html.js b/src/html.js index 124e559..c01957d 100644 --- a/src/html.js +++ b/src/html.js @@ -3,9 +3,7 @@ const svg = require('./svg.js'); const html = { main: (option, index, tran) => { let videos = ``; - for (let i = 0; i < option.video.url.length; i++) { - videos += html.video(i === 0, option.video.pic, option.screenshot, option.video.url.length ? 'metadata' : option.preload, option.video.url[i]); - } + videos += html.video(true, option.video.pic, option.screenshot, option.preload, option.video.url); return `
diff --git a/src/option.js b/src/option.js index b63e3c0..14feec2 100644 --- a/src/option.js +++ b/src/option.js @@ -19,6 +19,7 @@ module.exports = (option) => { preload: 'auto', volume: '0.7', apiBackend: defaultApiBackend, + video: {}, contextmenu: [ { text: '关于作者', @@ -39,9 +40,6 @@ module.exports = (option) => { option[defaultKey] = defaultOption[defaultKey]; } } - if (Object.prototype.toString.call(option.video.url) !== '[object Array]') { - option.video.url = [option.video.url]; - } if (option.video && !option.video.hasOwnProperty('type')) { option.video.type = 'auto'; }