A Pen by Joseph Paul Cisneros on CodePen.
Created
February 25, 2020 22:52
-
-
Save pemby/f0930270d812356cccb8744490ff7d8f to your computer and use it in GitHub Desktop.
VideoJS Playlist 2
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> | |
<video id="playerOne" class="video-js vjs-default-skin" controls="controls" width="600px" crossorigin="anonymous"></video> | |
</body> | |
</html> |
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
// console.clear(); | |
'use strict'; | |
var videoPlayer = window.videoPlayer || {}; | |
(function (o) { | |
var types = {mp4:'video/mp4',webm:'video/webm', m3u: 'application/x-mpegURL'}; | |
var vPlaylist = [ | |
// {sources: [{src: baseUrl+'1.mp4', type: types.mp4}]}, | |
// {sources: [{src: baseUrl+'2.mp4', type: types.mp4}]}, | |
// {sources: [{src: baseUrl+'3.mp4', type: types.mp4}]}, | |
// {sources: [{src: baseUrl+'4.mp4', type: types.mp4}]} | |
// , | |
{sources: [{src: 'https://vjs.zencdn.net/v/oceans.mp4', | |
type: types.mp4}, | |
{src: 'https://vjs.zencdn.net/v/oceans.webm', | |
type: types.webm }]}, | |
{sources: [{src: 'https://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8', | |
type: types.m3u}]}, | |
{sources: [{src: 'https://d2zihajmogu5jn.cloudfront.net/big-buck-bunny/master.m3u8', | |
type: types.m3u}]} | |
]; | |
var rate = 1; // playback rate | |
var options = { | |
autoplay: true, | |
controls: true, | |
muted: true, | |
fluid: false, | |
playbackRates: [1,1.25,1.5,1.75,2,2.25,2.5], | |
inactivityTimeout: 0 // 0 indicates that the user will never be considered inactive. | |
}; | |
var player = videojs('playerOne', options); | |
player.ready(function() { | |
// videojs.log('Ready Player One'); | |
this.playlist(vPlaylist); | |
this.playlist.autoadvance(0); | |
this.playlist.repeat(true); // Allow skipping back to first video in playlist. | |
}); | |
// player.on(['duringplaylistchange','playlistchange','beforeplaylistitem', 'playlistitem','playlistsorted'], function(e) { videojs.log(e.type); }); | |
player.on('beforeplaylistitem', function() { rate = this.playbackRate(); }); | |
player.on('playlistitem', function() { this.playbackRate(rate); }); | |
// var buttonComponent = videojs.getComponent('Button'); | |
// var buttons = ['vprevious','vnext']; | |
// var buttonObj; | |
// for (var i=0; i < buttons.length; i++) { | |
// var button = buttons[i]; | |
// buttonObj = videojs.extend(buttonComponent, { | |
// constructor: function() { | |
// buttonComponent.apply(this, arguments); | |
// this.addClass('icon-' +button); | |
// this.controlText(button); | |
// }, | |
// handleClick: function(e) { | |
// switch(button) { | |
// case 'vprevious': player.playlist.previous(); console.log(button); break; | |
// case 'vnext': player.playlist.next(); console.log(button); break; | |
// } | |
// } | |
// }); | |
// videojs.registerComponent(button,buttonObj); | |
// } | |
// player.getChild('controlBar').addChild('vprevious', {},0); | |
// player.getChild('controlBar').addChild('vnext',{},2); | |
var buttonComponent = videojs.getComponent('Button'); | |
var prevButton = videojs.extend(buttonComponent, { | |
constructor: function() { | |
buttonComponent.apply(this, arguments); | |
this.addClass('vjs-icon-previous-item'); | |
this.controlText('Previous'); | |
}, | |
handleClick: function(e) { | |
player.playlist.previous(); | |
} | |
}); | |
var nextButton = videojs.extend(buttonComponent, { | |
constructor: function() { | |
buttonComponent.apply(this, arguments); | |
this.addClass('vjs-icon-next-item'); | |
this.controlText('Next'); | |
}, | |
handleClick: function(e) { | |
player.playlist.next(); | |
// this.controlText('Next (part 3)'); | |
} | |
}); | |
videojs.registerComponent('prevButton', prevButton); | |
videojs.registerComponent('nextButton', nextButton); | |
player.getChild('controlBar').addChild('prevButton', {}, 0); | |
player.getChild('controlBar').addChild('nextButton', {}, 2); | |
})(videoPlayer); |
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
<script src="https://unpkg.com/video.js/dist/video.min.js"></script> | |
<script src="https://unpkg.com/@videojs/http-streaming/dist/videojs-http-streaming.js"></script> | |
<script src="https://cdn.jsdelivr.net/npm/videojs-playlist/dist/videojs-playlist.min.js"></script> |
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
video { height: auto; } | |
.vjs-icon-previous-item:before, .vjs-icon-next-item:before { font-size: 2em; } | |
/* Other characters for content: ‹‹ ❘◀️ ⏪ ⏩ ▶️❘ ›› ▶ */ |
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://unpkg.com/video.js/dist/video-js.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment