Skip to content

Commit

Permalink
support initing MSE video outside; support switching quality for MSE …
Browse files Browse the repository at this point in the history 
…video
  • Loading branch information
@DIYgod
DIYgod committed Aug 29, 2017
1 parent f1ea54a commit 450fdcc
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 51 deletions.
27 changes: 25 additions & 2 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,10 +113,12 @@ <h2 id="quality-switching">Quality switching</h2>
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'
Expand All @@ -137,6 +139,15 @@ <h2 id="hls-support">HLS support</h2>
}
});
</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>
Expand All @@ -151,6 +162,18 @@ <h2 id="flv-support">FLV support</h2>
}
});
</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>
Expand Down
73 changes: 33 additions & 40 deletions src/DPlayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -792,7 +792,7 @@ class DPlayer {
});
}

this.initVideo();
this.initVideo(this.video, this.quality && this.quality.type || this.option.video.type);

index++;
}
Expand Down Expand Up @@ -941,75 +941,68 @@ class DPlayer {
}
}

initVideo () {
// 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;
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';
}
}
if (enablehls && Hls.isSupported()) {

// Support HTTP Live Streaming
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();
}

/**
* 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;
Expand All @@ -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();
}
Expand Down Expand Up @@ -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', () => {
Expand Down
6 changes: 3 additions & 3 deletions src/DPlayer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -376,10 +376,8 @@

.dplayer-bar-preview {
position: absolute;
// width: 160px;
// height: 80px;
// top: -80px;
background: #fff;
pointer-events: none;

&.hidden {
visibility: hidden;
Expand All @@ -391,6 +389,7 @@
width: 100%;
height: 100%;
z-index: 1;
pointer-events: none;
}

.dplayer-bar-time {
Expand All @@ -412,6 +411,7 @@
word-wrap: normal;
word-break: normal;
z-index: 2;
pointer-events: none;
}

.dplayer-bar {
Expand Down
4 changes: 1 addition & 3 deletions src/html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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">
Expand Down
4 changes: 1 addition & 3 deletions src/option.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ module.exports = (option) => {
preload: 'auto',
volume: '0.7',
apiBackend: defaultApiBackend,
video: {},
contextmenu: [
{
text: '关于作者',
Expand All @@ -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';
}
Expand Down

0 comments on commit 450fdcc

Please sign in to comment.