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';
}