Last active
July 21, 2022 13:08
-
-
Save stefanJi/d3eef81ac9ebf73a84cbe3008b72cd64 to your computer and use it in GitHub Desktop.
VideoJs controlBar demo
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
<div> | |
<video id="censor-player" src='http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8'></video> | |
</div> | |
<div style="background: #eee; width:100px; height:600px;"></div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.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
var Player = (function(window, videojs) { | |
var rotateBtn = videojs.extend(videojs.getComponent("Button"), { | |
constructor: function(player) { | |
videojs.getComponent("Button").apply(this, arguments); | |
this.controlText("Rotate"); | |
this.rotate = 0; | |
this.player = player; | |
}, | |
handleClick: function() { | |
this.removeClass("rotate-" + this.rotate); | |
this.rotate += 90; | |
zoom = this.rotate % 180 === 0 ? 1 : 0.5; | |
this.rotate = this.rotate % 360 || 0; | |
this.player.zoomrotate({ rotate: this.rotate, zoom: zoom }); | |
this.addClass("rotate-" + this.rotate); | |
}, | |
buildCSSClass: function() { | |
return "rotate-0 vjs-control vjs-button"; | |
} | |
}); | |
var zoomrotatePlugin = function(settings) { | |
var defaults, extend; | |
defaults = { | |
zoom: 1, | |
rotate: 0 | |
}; | |
extend = function() { | |
var args, target, i, object, property; | |
args = Array.prototype.slice.call(arguments); | |
target = args.shift() || {}; | |
for (i in args) { | |
object = args[i]; | |
for (property in object) { | |
if (object.hasOwnProperty(property)) { | |
if (typeof object[property] === "object") { | |
target[property] = extend(target[property], object[property]); | |
} else { | |
target[property] = object[property]; | |
} | |
} | |
} | |
} | |
return target; | |
}; | |
var options, player, video, poster; | |
options = extend(defaults, settings); | |
player = this.el(); | |
video = this.el().getElementsByTagName("video")[0]; | |
poster = this.el().getElementsByTagName("div")[1]; | |
var properties = [ | |
"transform", | |
"WebkitTransform", | |
"MozTransform", | |
"msTransform", | |
"OTransform" | |
], | |
prop = properties[0]; | |
var i, j; | |
for (i = 0, j = properties.length; i < j; i++) { | |
if (typeof player.style[properties[i]] !== "undefined") { | |
prop = properties[i]; | |
break; | |
} | |
} | |
player.style.overflow = "hidden"; | |
video.style[prop] = | |
"scale(" + options.zoom + ") rotate(" + options.rotate + "deg)"; | |
poster.style[prop] = | |
"scale(" + options.zoom + ") rotate(" + options.rotate + "deg)"; | |
if (options.debug) console.log("zoomrotate: Register end"); | |
}; | |
var createPlayer = function() { | |
var vid = document.querySelector("#censor-player"); | |
vid.style.width = vid.style.width || 450; | |
vid.style.height = vid.style.height || 300; | |
vid.className = "video-js vjs-default-skin vjs-big-play-centered"; | |
var player = videojs(vid, { | |
controls: true, | |
playbackRates: [1, 1.2, 1.5, 1.8, 2], | |
controlBar: { | |
audioTrackButton: false, | |
subsCapsButton: false | |
} | |
}); | |
player.src({ | |
src: vid.src, | |
type: vid.type || "application/x-mpegURL" | |
}); | |
player.getChild("controlBar").addChild("rotateButton", {}); | |
var seekBar = player.controlBar.progressControl.seekBar; | |
window.addEventListener( | |
"keydown", | |
function(event) { | |
switch (event.keyCode) { | |
case 32: //Space | |
if (player.paused()) { | |
player.play(); | |
} else { | |
player.pause(); | |
} | |
break; | |
case 39: //ArrowRight | |
var cur = player.currentTime(); | |
player.currentTime(cur + 5); | |
break; | |
case 37: //ArrowLeft | |
var cur = player.currentTime(); | |
player.currentTime(cur - 5); | |
break; | |
} | |
}, | |
false | |
); | |
window.onkeydown = function(e) { | |
return !(e.keyCode == 32); | |
}; | |
}; | |
var init = function() { | |
videojs.registerComponent("RotateButton", rotateBtn); | |
videojs.registerPlugin("zoomrotate", zoomrotatePlugin); | |
createPlayer(); | |
}; | |
return { | |
init: init | |
}; | |
})(window, videojs); | |
Player.init(); |
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
.rotate-0 :before{ | |
content: 'R'; | |
} | |
.rotate-90 :before{ | |
content: '90°'; | |
} | |
.rotate-180 :before{ | |
content: '180°'; | |
} | |
.rotate-270 :before{ | |
content: '270°'; | |
} |
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/video.js/6.3.3/video-js.css" rel="stylesheet" /> |
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
<div> | |
<video width=450 height=300 class="video-js vjs-default-skin vjs-big-play-centered"> | |
<source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL" /> | |
</video> | |
</div> | |
<hr /> | |
<div> | |
<video width=450 height=300 class="video-js vjs-default-skin vjs-big-play-centered"> | |
<source src="http://d2zihajmogu5jn.cloudfront.net/bipbop-advanced/bipbop_16x9_variant.m3u8" type="application/x-mpegURL" /> | |
</video> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/6.3.3/video.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.12.2/videojs-contrib-hls.min.js"></script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Videojs demo