videojs
转载声明：
本文为摘录自“简书”，版权归原作者所有。
温馨提示：
为了更好的体验，请点击原文链接进行浏览
摘录时间：
2021-10-20 11:30:14
videojs
videojs官方文档
引入css和js可直接对页面中所有video生效
配置属性
- 直接在html的video标签中加入
data-setup属性配置属性 - 通过
videojs()方法传入video元素或其id，初始化并配置属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>videojs</title>
<link href="https://vjs.zencdn.net/7.10.2/video-js.css" rel="stylesheet" />
</head>
<body>
<video id="my-video" class="video-js" data-setup='{"height":"300","width":"300"}'>
<!-- <source src="test.mp4" type="video/mp4" /> -->
<p class="vjs-no-js">
please enable JavaScript
</p>
</video>
<div id="btn" onclick="clickMe()">clickme</div>
</body>
<script src="https://vjs.zencdn.net/7.10.2/video.min.js"></script>
<script>
videojs.options.autoplay = true;//全局配置
var myPlayer = videojs('my-video', {
//video原有基础属性/标签
muted: true,
controls: true,
loop: false,
autoplay: false,
sources: [{
src: "test.mp4", type: "video/mp4"
}],
//videojs新增属性
// aspectRatio:"10:1",//长宽比(优先级高于宽高属性)
playbackRates: [0.5, 1, 1.5, 3],//可选播放速度
// fluid:true,
},
function onPlayerReady() {
console.log("muted", this.muted());
this.muted(false);
this.volume(0.5);//调整音量 0~1
this.play();
videojs.log("播放开始了1!");
});
//改变播放内容
myPlayer.src({ type: 'video/mp4', src: 'http://www.example.com/path/to/video.mp4' });
videojs.getPlayer(document.getElementById('my-video')).on("ended", function () {
videojs.log("播放结束了1!");
});
videojs.getPlayer('my-video').on("ended", function () {
videojs.log("播放结束了2!");
this.dispose();//销毁该实例,解除所有绑定事件并移除对应video元素
console.log("是否已销毁", this.isDisposed());
});
videojs.getPlayers()['my-video'].ready(function () {
videojs.log("播放开始了2!");
console.log("isFullscreen", myPlayer.isFullscreen());
});
function clickMe() {//requestFullscreen需要user gesture之后才能触发
console.log("isFullscreen", myPlayer.isFullscreen());
// document.documentElement.requestFullscreen();
myPlayer.requestFullscreen();
setTimeout(() => {//3秒后退出全屏
document.exitFullscreen();
}, 3000);
};
</script>
</html>
