support initing MSE video outside; support switching quality for MSE video
This commit is contained in:
DIYgod
parent
f1ea54ab54
commit
450fdcce24
|
|
@ -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 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
<div id="dplayer8"></div>
|
||||
<script>
|
||||
var dp8 = new DPlayer({
|
||||
element: document.getElementById('dplayer8')
|
||||
});
|
||||
var hls = new Hls();
|
||||
hls.loadSource('http://devtest.qiniudn.com/若能绽放光芒5.m3u8');
|
||||
hls.attachMedia(dp8.video);
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<h2 id="flv-support">FLV support</h2>
|
||||
|
|
@ -151,6 +162,18 @@
|
|||
}
|
||||
});
|
||||
</script>
|
||||
<div id="dplayer7"></div>
|
||||
<script>
|
||||
var dp7 = new DPlayer({
|
||||
element: document.getElementById('dplayer7')
|
||||
});
|
||||
var flvPlayer = flvjs.createPlayer({
|
||||
type: 'flv',
|
||||
url: 'http://devtest.qiniudn.com/【微小微】玖月奇迹－踩踩踩.flv'
|
||||
});
|
||||
flvPlayer.attachMediaElement(dp7.video);
|
||||
flvPlayer.load();
|
||||
</script>
|
||||
</div>
|
||||
|
||||
<h2 id="bilibili-video-and-danmaku">Bilibili video and danmaku</h2>
|
||||
|
|
|
|||
|
|
@ -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', () => {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 `
|
||||
<div class="dplayer-mask"></div>
|
||||
<div class="dplayer-video-wrap">
|
||||
|
|
|
|||
|
|
@ -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';
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue