关于flvjs、videojs、cyberplayer.js视频播放插件
阎令
cyberplayer做直播问题就是暂停再播放不是最新的视频页面，我还没找到解决办法，所以暂时推荐直播用flvjs
videojs关于清晰度切换的配置参数官方好像没有，查资料都是videoJS菜单界面二次开发，比如：https://www.2cto.com/kf/201607/526575.html
https://xiaohuihui.net.cn/archives/1161.html
PS：如果你不想进行清晰度的二次开发就用cyberplayer
遇到的问题： 配置自动播放，没能自动播放问题，请看这里： 解决Chrome浏览器无法自动播放音频视频的问题，Uncaught (in promise) DOMException
1、flv.js(直播，视频播放）
官方github：https://github.com/bilibili/flv.js
官方demo：http://bilibili.github.io/flv.js/demo/
【优化直播参数】参考：https://segmentfault.com/a/1190000009695424
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>flv.js demo</title>
<style>
.mainContainer {
display: block;
width: 1024px;
margin-left: auto;
margin-right: auto;
}
.urlInput {
display: block;
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 8px;
margin-bottom: 8px;
}
.centeredVideo {
display: block;
width: 100%;
height: 576px;
margin-left: auto;
margin-right: auto;
margin-bottom: auto;
}
.controls {
display: block;
width: 100%;
text-align: left;
margin-left: auto;
margin-right: auto;
}
</style>
</head>
<body>
<div class="mainContainer">
<video id="videoElement" class="centeredVideo" controls autoplay width="1024" height="576">
Your browser is too old which doesn't support HTML5 video.
</video>
</div>
<br>
<div class="controls">
<!--<button οnclick="flv_load()">加载</button>-->
<button onclick="flv_start()">开始</button>
<button onclick="flv_pause()">暂停</button>
<button onclick="flv_destroy()">停止</button>
<input style="width:100px" type="text" name="seekpoint" />
<button onclick="flv_seekto()">跳转</button>
</div>
<script src="../dist/flv.min.js"></script>
<script>
var video = player = document.getElementById('videoElement');
if (flvjs.isSupported()) {
var flvPlayer = flvjs.createPlayer({
type: 'flv',
isLive: true,
url: 'https://video3.shuxuejia.com/shuxuejia/test123.flv'
},
{
enableWorker: true,
enableStashBuffer: false,
stashInitialSize: 128,
} // 这里得参数主要是用来优化直播视频卡顿问题
// {
// enableStashBuffer: false,
// }
);
flvPlayer.attachMediaElement(videoElement);
flvPlayer.load(); //加载
player.play();
// 两秒检测一次当前播放进度和实时进度得时间差
// 超过1.5s要将【当前播放时间】改为【实时进度时间】
setInterval(() => {
if (!video.buffered.length) {
return;
}
let end = video.buffered.end(0);
let diff = end - video.currentTime;
if (diff >= 1.5)
video.currentTime = end;
}
}, 2000);
}
function flv_start() {
player.play();
}
function flv_pause() {
player.pause();
}
function flv_destroy() {
player.pause();
player.unload();
player.detachMediaElement();
player.destroy();
player = null;
}
function flv_seekto() {
player.currentTime = parseFloat(document.getElementsByName('seekpoint')[0].value);
}
</script>
</body>
</html>
2、video.js(貌似也可以直播，视频播放）
官方github：https://github.com/videojs/video.js
参考例子： https://www.awaimai.com/2053.html
<link href="https://unpkg.com/video.js/dist/video-js.min.css" rel="stylesheet">
<script src="https://unpkg.com/video.js/dist/video.min.js"></script>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="none">
</video>
<script>
//初始化视频方法
let myPlayer = videojs('example_video_1', {
//确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。
controls: true,
//自动播放属性,muted:静音播放
muted: true,
autoplay: true,
//建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
preload: "auto",
//设置视频播放器的显示宽度（以像素为单位）
width: "816px",
//设置视频播放器的显示高度（以像素为单位）
height: "458px",
// url
poster: 'https://static.shuxuejia.com/img/video_image.png',
sources: [{
src: 'http://www.ixuezhong.cn/img/mp4.mp4'
}],
playbackRates: [0.5, 1, 1.5, 2] //倍速播放
}, function onPlayerReady() {
videojs.log('Your player is ready!'); // 比如： 播放量+1请求
this.on('ended', function() {
videojs.log('Awww...over so soon?!');
});
});
</script>
1、cyberplayer.js(直播，视频播放）
官网demo：http://cyberplayer.bcelive.com/demo/new/index.html
<div id="playercontainer"></div>
<style>
.jw-icon-barlogo-new {
display: none;
}
.jw-icon-hd {
position: relative;
top: 0.5em;
}
</style>
<script type="text/javascript" src="http://cyberplayer.bcelive.com/demo/new/player/cyberplayer.js"></script>
<script type="text/javascript">
//do something
var player = cyberplayer("playercontainer").setup({
width: 680,
height: 448,
autostart: true,
stretching: "uniform",
volume: 100,
controls: true,
starttime: 0,
controlbar: {
barLogo: false //logo显示与否
},
playRate: false, // 默认h5播放器有倍速功能
// 可配置倍速值数组，格式如下所示
playRateConfig: [
{label: "×1"},
{label: "×1.5"},
{label: "×2"}
],
playlist: [
{
image: "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hbqagik5sfq1jsai/mda-hbqagik5sfq1jsai.jpg", // 预览图
sources: [
{
file: "http://gcqq450f71eywn6bv7u.exp.bcevod.com/mda-hiup6h1qdymgf3fe/mda-hiup6h1qdymgf3fe.m3u8", // 资源2 必须与资源1格式和时长一致！
label: "720p",
}
]
}
],
ak: "61690e85453d4fd9a5ce1734851eb151" // 公有云平台注册即可获得accessKey
});
player.onReady(function() {
console.log(11111); // 播放量+1
});
</script>
PS：这里面还有好多api和配置参数没写出来，请自己去查官方文档，上面都是基础的一些东西。
类似资料：