videojs使用心得

这篇博文主要包括四个部分:

目录

一、基本使用:

二、显示隐藏自己需要的videojs控制栏按钮

三、改写video原生组件,比如(PlaybackRateMenuButton)

四、自定义video组件,比如(视频中随机位置滚动的文字)

 

一、基本使用:参考网址:https://videojs.com/getting-started/
第1步:引用css和js

<head>
  <link href="https://vjs.zencdn.net/7.6.0/video-js.css" rel="stylesheet">

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script>
</head>

第2步:定义video容器

<video id='my-video' class='video-js' controls preload='auto' width='640' height='264'
  poster='MY_VIDEO_POSTER.jpg' data-setup='{}'>
    <source src='MY_VIDEO.mp4' type='video/mp4'>
    <source src='MY_VIDEO.webm' type='video/webm'>
    <p class='vjs-no-js'>
      To view this video please enable JavaScript, and consider upgrading to a web browser that
      <a href='https://videojs.com/html5-video-support/' target='_blank'>supports HTML5 video</a>
    </p>
  </video>

video-js的类名不能少,controls即是显示底部带音量、全屏、播放时间、播放进度等的控制栏,preload是预加载
data-setup:自定义的播放器配置,官网解释链接:
https://docs.videojs.com/tutorial-setup.html这个配置可以直接写在标签里的data-setup里面,也可以写在js中,比如:

this.player = videojs(this.videoNode, {
    //这里相当于标签中data-setup属性的功能
    playbackRates: [2.0, 1.5, 1.2, 1.0, 0.7],
}, function onPlayerReady() {
    console.log('onPlayerReady', this)
});

二、显示隐藏自己需要的videojs控制栏按钮

我的配置是隐藏音量按钮,显示当前时间,显示总时间,隐藏剩余时间

this.player = videojs(this.videoNode, {
	playbackRates: [2.0, 1.5, 1.2, 1.0, 0.7],//切换播放速率按钮
	suppressNotSupportedError: false,//官网解释:https://docs.videojs.com/tutorial-options.html
	controlBar: {
		fullscreenToggle: true,//显示全屏按钮,默认为true
		pictureInPictureToggle: false,//隐藏画中画按钮,默认为true
		volumePanel: false,//隐藏声音面板
		currentTimeDisplay: true,//显示当前播放时间
		timeDivider: true,//显示时间分割线
		durationDisplay: true,//显示总时间
		remainingTimeDisplay: false,//隐藏剩余时间,
	}
}, function onPlayerReady() {
	 console.log('onPlayerReady', this)
});

重点:怎么知道这些配置层级

方法1:参考官网,https://docs.videojs.com/tutorial-components.html之Default Component Tree
方法2:根据图上onPlayerReady事件打印的this找层级,这里的this是播放器本身,和js的this没有关系:附图理解:
方法3:如果js配置的显示隐藏没有效果,还可以通过css来显示隐藏,可以在渲染的页面中找想要隐藏的类名:附图理解:

方法2图片

player

方法3图片

tag标签css配置

三、改写video原生组件,比如(PlaybackRateMenuButton)
背景:我的视频网页是在手机端的应用,然后倍速的点击会有问题,以下是我的改写代码

this.player = videojs(this.videoNode, {
	suppressNotSupportedError: false,
	controlBar: {
		fullscreenToggle: true,
		pictureInPictureToggle: false,
		volumePanel: false,
		currentTimeDisplay: true,
		timeDivider: true,
		durationDisplay: true,
		remainingTimeDisplay: false,
		playbackRateMenuButton: false,//这个必须,不然你得网页会出现两个调整播放速率的显示
	}
}, function onPlayerReady() {
	console.log('onPlayerReady', this);		
});
//扩展自以前的速率button,这样很多内置的方法都不用写
var definePlaybackRateMenuButton = videojs.extend(videojs.getComponent('PlaybackRateMenuButton'), {
    //改写点击事件,videojs的点击事件是将倍速变为倍速数组的最后一个值,hover效果来显示倍速选项item,这里在手机端,所以需要将点击事件变为toggle倍数数组的显示和隐藏
	handleClick: function() {
		if(this.menu.el_.style.display === '' || this.menu.el_.style.display === 'none'){
			this.menu.el_.style.display = 'block';
		}else{
			this.menu.el_.style.display = 'none';
		}
	},
    //这个方法必须,因为新组件需要自己的rates数组。player的option里面定义的只是PlaybackRateMenuButton原始组件的rates数组
	playbackRates: function() {
		return [2.0, 1.5, 1.2, 1.0, 0.7]
	}
});
//注册定义的新rate组件
videojs.registerComponent('definePlaybackRateMenuButton', definePlaybackRateMenuButton);
//将组件添加到控制栏的按钮组中,5是添加的位置
this.player.getChild('controlBar').addChild('definePlaybackRateMenuButton', {}, 5);
/* js配置将速率隐藏了,所以这里需要用css将速率显示出来 */
.vjs-control-bar .vjs-playback-rate{
	display: block !important;
}

四、自定义video组件,比如(视频中随机位置滚动的文字)---参考三,详情请参考我的另一篇博文:vue中使用video-js
https://blog.csdn.net/mollerlala/article/details/100150738

评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值