关于flvjs、videojs、cyberplayer.js视频播放插件

最新推荐文章于 2024-06-22 09:49:22 发布

街边吃垃圾

最新推荐文章于 2024-06-22 09:49:22 发布

阅读量6.9k

点赞数 2

分类专栏： js 播放器文章标签： javascript

本文链接：https://blog.csdn.net/zhangjing0320/article/details/104068063

版权

js 同时被 2 个专栏收录

99 篇文章 1 订阅

订阅专栏

播放器

1 篇文章 0 订阅

订阅专栏

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和配置参数没写出来，请自己去查官方文档，上面都是基础的一些东西。

街边吃垃圾

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
关于flvjs、videojs、cyberplayer.js视频播放插件

cyberplayer做直播问题就是暂停在播放不是最新的视频页面，我还没找到解决办法，所以暂时推荐直播用flvjs关于videojs关于清晰度切换的配置参数官方好像没有，查资料都是videoJS菜单界面二次开发，比如：https://www.2cto.com/kf/201607/526575.htmlhttps://xiaohuihui.net.cn/archives/1161.htmlPS...
复制链接

扫一扫

专栏目录