Videojs使用心得

最新推荐文章于 2024-08-20 22:59:20 发布

陈隐官

最新推荐文章于 2024-08-20 22:59:20 发布

阅读量314

点赞数 1

文章标签： javascript js

本文链接：https://blog.csdn.net/m0_56976931/article/details/115485118

版权

Videojs使用心得

最近做的项目中有关于视频监控方面的，技术选型我选择了VideoJs，常见的直播流协议的文件类型都支持播放，不过由于网上相关文档较少，还是踩了不少坑，希望文章对大家有所帮助。

直播流播放协议

常用的直播流播放协议分为以下几种：

RTMP、RTSP（这俩大坑基于flash播放，flash都凉凉了，建议弃用）
Http-FLV
HLS
直播流播放协议介绍链接: 点这里.

VideoJs初始化

VideoJs播放m3u8类型文件，初始化分几种，这里只介绍使用框架的：

/* 以react举例；*/
let player;
useEffect(()=>{
	const video = document.getElementsByTagName("video")[0];
	if(video){
		player=videojs(
		document.getElementById('id'),
		{
			 controls: true, // 是否显示控制条
  			 poster: 'xxx', // 视频封面图地址
 			 preload: 'auto',
  			 autoplay: false,
  			 fluid: true, // 自适应宽高
  			 language: 'zh-CN', // 设置语言
  			 muted: false, // 是否静音
  			 inactivityTimeout: false,
  			 controlBar: { // 设置控制条组件
    		/* 设置控制条里面组件的相关属性及显示与否
    			 'currentTimeDisplay':true,
   				 'timeDivider':true,
     			 'durationDisplay':true,
   				 'remainingTimeDisplay':false,
   				 volumePanel: {
    				  inline: false,
   				 }
    		*/
   			 /* 使用children的形式可以控制每一个控件的位置，以及显示与否 */
   			 children: [
      			{name: 'playToggle'}, // 播放按钮
      			{name: 'currentTimeDisplay'}, // 当前已播放时间
     		    {name: 'progressControl'}, // 播放进度条
     		    {name: 'durationDisplay'}, // 总时间
      			{ // 倍数播放
        			name: 'playbackRateMenuButton',
        			'playbackRates': [0.5, 1, 1.5, 2, 2.5]
      			},
      			{
        			name: 'volumePanel', // 音量控制
        			inline: false, // 不使用水平方式
      			},
      				{name: 'FullscreenToggle'} // 全屏
   		   	]
  		},
  		sources:[ // 视频源
      				{
         		 		src: /*链接*/,
          				type: 'application/x-mpegURL',
          				poster: '//vjs.zencdn.net/v/oceans.png'
      				}
  				]		
			},
			()=>{
				/* 这里写一些播放器方法和相关逻辑处理 例如*/
				player.play();
			}
		)
	}
},[])

/*一定要在页面销毁生命周期里调用,否则页面销毁也会持续请求直播流*/
{
	player.dispose();
}