videojs使用心得

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

mollerlala

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

阅读量5.8k

点赞数 4

分类专栏：前端库--videojs 前端框架--vue 文章标签： video videojs playbackrates

本文链接：https://blog.csdn.net/mollerlala/article/details/99716281

版权

前端框架--vue 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

前端库--videojs

3 篇文章 0 订阅

订阅专栏

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

一、基本使用：

二、显示隐藏自己需要的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图片

方法3图片

三、改写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

mollerlala

关注

4
点赞
踩
15

收藏

觉得还不错? 一键收藏
6
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

videojs使用心得

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

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

第2步：定义video容器

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

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

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

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

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

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

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