Created
August 2, 2019 18:12
-
-
Save wildshark/bfc9cb294dcc7dd9682135146b094249 to your computer and use it in GitHub Desktop.
Videojs - Playlist 5.16.0
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/> | |
<link href="https://vjs.zencdn.net/5.16.0/video-js.min.css" rel="stylesheet"/> | |
<script src="https://vjs.zencdn.net/5.16.0/video.min.js"></script> | |
<script src="https://rawgit.com/atlance01/vrapp-ionic/master/www/js/lib/videojs-playlist.js"></script> | |
<video class="video-js vjs-default-skin" controls width="640px" height="360px"></video> | |
<button class="previous">Previous</button> | |
<button class="next">Next</button> | |
<button class="jump">Play Third</button> | |
<div class="autoadvance-group"> | |
<h4>Auto-advance (in seconds)</h4> | |
<label><input type="radio" name="autoadvance" value="null" checked> No auto-advance</label> | |
<label><input type="radio" name="autoadvance" value="0"> 0</label> | |
<label><input type="radio" name="autoadvance" value="5"> 5</label> | |
<label><input type="radio" name="autoadvance" value="10"> 10</label> | |
<label><input type="radio" name="autoadvance" value="30"> 30</label> | |
</div> | |
<ul> | |
<li><a href="/test/">Run unit tests in browser.</a></li> | |
</ul> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// https://github.com/brightcove/videojs-playlist/blob/master/docs/api.md | |
var videoList = [{ | |
sources: [{ | |
src: 'http://media.w3.org/2010/05/sintel/trailer.mp4', | |
type: 'video/mp4' | |
}], | |
poster: 'https://www.rt.com/static/img/og-logo-rt.png' | |
}, { | |
sources: [{ | |
src: 'http://media.w3.org/2010/05/bunny/trailer.mp4', | |
type: 'video/mp4' | |
}], | |
poster: 'http://media.w3.org/2010/05/bunny/poster.png' | |
}, { | |
sources: [{ | |
src: 'https://vjs.zencdn.net/v/oceans.mp4', | |
type: 'video/mp4' | |
}], | |
poster: 'https://vjs.zencdn.net/v/oceans.png' | |
}, { | |
sources: [{ | |
src: 'http://media.w3.org/2010/05/bunny/movie.mp4', | |
type: 'video/mp4' | |
}], | |
poster: 'http://media.w3.org/2010/05/bunny/poster.png' | |
}, { | |
sources: [{ | |
src: 'http://media.w3.org/2010/05/video/movie_300.mp4', | |
type: 'video/mp4' | |
}], | |
poster: 'http://media.w3.org/2010/05/video/poster.png' | |
}]; | |
var player = videojs(document.querySelector('video'), { | |
inactivityTimeout: 0 | |
}); | |
try { | |
// try on ios | |
player.volume(1); | |
// player.play(); | |
} catch (e) {} | |
//player.playlist(videoList, 4);/// play video 5 | |
player.playlist(videoList); | |
document.querySelector('.previous').addEventListener('click', function() { | |
player.playlist.previous(); | |
}); | |
document.querySelector('.next').addEventListener('click', function() { | |
player.playlist.next(); | |
}); | |
document.querySelector('.jump').addEventListener('click', function() { | |
player.playlist.currentItem(2); // play third | |
}); | |
player.playlist.autoadvance(0); // play all | |
Array.prototype.forEach.call(document.querySelectorAll('[name=autoadvance]'), function(el) { | |
el.addEventListener('click', function() { | |
var value = document.querySelector('[name=autoadvance]:checked').value; | |
//alert(value); | |
player.playlist.autoadvance(JSON.parse(value)); | |
}); | |
}); | |
/* ADD PREVIOUS */ | |
var Button = videojs.getComponent('Button'); | |
// Extend default | |
var PrevButton = videojs.extend(Button, { | |
//constructor: function(player, options) { | |
constructor: function() { | |
Button.apply(this, arguments); | |
//this.addClass('vjs-chapters-button'); | |
this.addClass('icon-angle-left'); | |
this.controlText("Previous"); | |
}, | |
// constructor: function() { | |
// Button.apply(this, arguments); | |
// this.addClass('vjs-play-control vjs-control vjs-button vjs-paused'); | |
// }, | |
// createEl: function() { | |
// return Button.prototype.createEl('button', { | |
// //className: 'vjs-next-button vjs-control vjs-button', | |
// //innerHTML: 'Next >' | |
// }); | |
// }, | |
handleClick: function() { | |
console.log('click'); | |
player.playlist.previous(); | |
} | |
}); | |
/* ADD BUTTON */ | |
//var Button = videojs.getComponent('Button'); | |
// Extend default | |
var NextButton = videojs.extend(Button, { | |
//constructor: function(player, options) { | |
constructor: function() { | |
Button.apply(this, arguments); | |
//this.addClass('vjs-chapters-button'); | |
this.addClass('icon-angle-right'); | |
this.controlText("Next"); | |
}, | |
handleClick: function() { | |
console.log('click'); | |
player.playlist.next(); | |
} | |
}); | |
// Register the new component | |
videojs.registerComponent('NextButton', NextButton); | |
videojs.registerComponent('PrevButton', PrevButton); | |
//player.getChild('controlBar').addChild('SharingButton', {}); | |
player.getChild('controlBar').addChild('PrevButton', {}, 0); | |
player.getChild('controlBar').addChild('NextButton', {}, 2); | |
//player.controlBar.addChild('SharingButton', {}, 6); | |
//var MyButton = player.controlBar.addChild(new MyButtonComponent(), {}, 6); | |
//const ControlBar = videojs.getComponent('ControlBar'); | |
//ControlBar.prototype.options_.children.splice(ControlBar.prototype.options_.children.length - 1, 0, 'SharingButton'); | |
// Register the new component | |
//videojs.registerComponent('SharingButton', SharingButton); | |
//player.getChild('controlBar').addChild('SharingButton', {}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
html, | |
body { | |
width: 100%; | |
} | |
.video-holder, | |
.video-holder * { | |
box-sizing: border-box !important | |
} | |
.video-holder { | |
background: #1b1b1b; | |
padding: 10px | |
} | |
.centered { | |
width: 100% | |
} | |
#video { | |
border-radius: 8px | |
} | |
.video-holder .vjs-big-play-button { | |
left: 50%; | |
width: 100px; | |
margin-left: -50px; | |
height: 80px; | |
top: 50%; | |
margin-top: -40px | |
} | |
/* CUSTOM BUTTONS */ | |
[class^="icon-"]:before, | |
[class*=" icon-"]:before { | |
font-family: FontAwesome; | |
font-weight: normal; | |
font-style: normal; | |
display: inline-block; | |
text-decoration: inherit; | |
} | |
.icon-angle-left:before { | |
content: "\f104"; | |
} | |
.icon-angle-right:before { | |
content: "\f105"; | |
} | |
.video-js .icon-angle-right, .video-js .icon-angle-left { | |
cursor: pointer; | |
-webkit-box-flex: none; | |
-moz-box-flex: none; | |
-webkit-flex: none; | |
-ms-flex: none; | |
flex: none; | |
} | |
/* | |
Video.js Controls Style Overrides | |
.vjs-default-skin .vjs-progress-control, | |
.vjs-default-skin .vjs-fullscreen-control { | |
display: none; | |
}*/ | |
/*.playlist-components { | |
height: 264px; | |
width: 40%; | |
padding: 0 0 0 10px | |
} | |
.video-js, .playlist-components { | |
display: inline-block; | |
margin-right: -4px; | |
vertical-align: top; | |
} | |
.button-holder { | |
padding: 10px; | |
height: 36px; | |
} | |
.playlist { | |
height: 264px; | |
width: 100%; | |
overflow-y: auto; | |
color: #c0c0c0; | |
border-radius: 8px; | |
display: block; | |
margin: -2px 0 0 0; | |
padding: 0; | |
position: relative; | |
background: -moz-linear-gradient(top,#000 0,#212121 19%,#212121 100%); | |
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#000),color-stop(19%,#212121),color-stop(100%,#212121)); | |
background: -o-linear-gradient(top,#000 0,#212121 19%,#212121 100%); | |
background: -ms-linear-gradient(top,#000 0,#212121 19%,#212121 100%); | |
background: linear-gradient(to bottom,#000 0,#212121 19%,#212121 100%); | |
box-shadow: 0 1px 1px #1a1a1a inset,0px 1px 1px #454545; | |
border: 1px solid #1a1a18; | |
} | |
#next {float: right} | |
#prev {float: left} | |
#prev, #next { | |
cursor: pointer; | |
color: white; | |
text-transform: uppercase; | |
font-size: 12px; | |
} | |
.playlist ul { | |
padding: 0; | |
margin: 0; | |
list-style: none | |
} | |
.playlist ul li { | |
padding: 10px; | |
border-bottom: 1px solid #191919; | |
cursor: pointer | |
} | |
.playlist ul li.active { | |
background-color: #4f4f4f; | |
border-color: #4f4f4f; | |
color: white; | |
} | |
.playlist ul li:hover { | |
border-color: #353535; | |
background: #353535; | |
} | |
.playlist .poster, .playlist .title { | |
display: inline-block; | |
vertical-align: top | |
} | |
.playlist .number {padding-right: 10px; display: none} | |
.playlist .poster {display: none} | |
.playlist .title {padding-left: 0}*\ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment