vue中使用video-js--随机滚动的文字

注意：videojs升级后，不能用extend创建组件，需要自定义组件，请参考下方网址

react+video.js h5自定义视频暂停图标-CSDN博客

开头就赠送福利的博主，哈哈哈，这是我看了很久官网，翻了很多博客才找到的大佬网址，笑纳https://www.cnblogs.com/afrog/p/6689179.html

目录

你能从这篇博文学到的：

博客背景：

正文代码，(js，css，html)这是浓缩的精华，建议复制了看一看：

code关键代码详解：

总结：

---

你能从这篇博文学到的：

1.vue中定时器的使用

2.vue中使用video-js

3.video-js自定义组件

博客背景：

1.学到新东西了喜欢和大家一起分享

2.公司项目开始用的vue-video-player，结果有个客户的电脑不支持vue-video-player，连vue-video-player的官网视频都播放不了，原因不可知。

3.公司视频需要加一个随机位置滚动的标识，防止被录频，公司项目是图中的名称和手机号码随机滚动，如图

正文代码，(js，css，html)这是浓缩的精华，建议复制了看一看：

js

import abbr from '@api/abbr'
import { apiGetVideoUrl } from '@api'
import videojs from 'video.js';
import 'video.js/dist/video-js.css';
import postImg from '@img/vdloader.png'


export default {
	name: 'DefineVideo',
	data() {
	    return {
			userObj: {},
			playerOptions: {},
			animationTextTop: (Math.random()*80+5)+'%',//随机高度
			player: null,//播放器
			timeEight: null,//定时器
	    };
	},
	methods: {
		init() {
			let self = this;
			//从后台获取视频链接的函数
			self.changeVideo();
			//获取个人信息的方法
			setTimeout(function(){
				self.userObj = self.$store.getters.getUserObj;
			},10);
		},
		//设置8秒定时器，这个8秒是和css里面的动画循环时间一致的
		setTimeEightTop(){
			let self = this;
			self.timeEight = setInterval(() => {
				self.animationTextTop = (Math.random()*80+5)+'%';
				if(self.player && self.player.getChild('RandomButton')){
					self.player.getChild('RandomButton').eventBusEl_.style.top = self.animationTextTop;
				}
			},8000)
		},
		//清楚定时器
		clearTimeEightTop(){
			clearInterval(this.timeEight);
		},
		//配置播放器
		dealVideoSrc(){
			let self = this;
			var video = document.getElementById("videomad");
			let url = 'http://vjs.zencdn.net/v/oceans.mp4';
			self.playerOptions = {
				height: '528',
				controls: true,
				autoplay: true,
				preload: 'auto',
				loop: false,
				muted: false,
				language: 'zh-CN',
				playbackRates: [0.7, 1.0, 1.2, 1.5, 2.0],
				sources: [{
					type: "video/mp4",
					src: url,
				}],
				poster: postImg,
				notSupportedMessage: '此视频暂无法播放，请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
				controlBar: {
					volumePanel: {
						inline: false
					},
					PictureInPictureToggle: false,//隐藏画中画
					currentTimeDisplay: true,//当前播放时间
					timeDivider: true,//时间中间的分割线
					durationDisplay: true,//视频全部时间
					remainingTimeDisplay: false,//视频剩余时间
				},
			};
			this.player = videojs(document.getElementById('videomad'), self.playerOptions, function onPlayerReady() {
				// console.log('onPlayerReady', this);
			});
			this.createMyButton();
		},
		//创建自定义video标识组件
		createMyButton () {
			let Button = videojs.getComponent('Button')
			let RandomButton = videojs.extend(Button, {
				//这个就这么抄着，必需
				constructor: function (player, options) {
						Button.apply(this, arguments)
				},
				//自定义组件被点击后的事件
				handleClick: () => {
					var isPaused = this.player.tech_.el_.paused;
					if(!isPaused){
						this.player.pause();
					}else{
						this.player.play();
					}
				},
				 // 创建一个DOM元素
				createEl: function() {
                    //这个类名在css中要用到，很重要
					var divObj = videojs.dom.createEl('div', {
						className: 'momodefine',
					});
					videojs.dom.appendContent(divObj, this.options_.text)
					return divObj;
				},
			})
			//注册视频中随机位置滚动的组件
			videojs.registerComponent('RandomButton', RandomButton);
			//将组件添加到播放器中
			this.player.addChild('RandomButton', {
				text: this.userObj.stuName+'--'+this.userObj.stuMobile
			});
			//调用定时器
			this.setTimeEightTop();
		},
		//此函数获取后台传过来的url链接，用于上一讲，下一讲，以及随机点击视频列表
		changeVideo(){
			let self = this;
			// 播放器的销毁 start
			if (this.player) {
				this.player.dispose();
				//注意销毁了一定要重新创建video元素
				this.clearTimeEight();
				var div = document.createElement("video");
				div.id = "videomad";
				//为div创建属性class="video-js"
				var divattr = document.createAttribute("class");
				divattr.value = "video-js";
				div.setAttributeNode(divattr);
				document.getElementById('myvideolr').appendChild(div);
			}
			// 播放器的销毁 end
			let formdata = {
				classId: 1011
			}
			apiGetVideoUrl(formdata).then(response => {
				if(response.code == abbr.okId){
					//这个例子我将视频地址写成静态了，读者可以自己将链接传给这个函数
					self.dealVideoSrc();
				}else{
					//请求失败的处理
				}
				
			}).catch(error => {
				
			})
		},
	},
	mounted(){
		this.init();
	},
	//离开页面后销毁播放器，定时器
	beforeDestroy() {
		if (this.player) {
			this.player.dispose()
		}
		this.clearTimeEightTop();
	},
}

css

.momodefine{
	color: #fff !important;
	font-size: 16px;text-shadow: 2px 2px #333;display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	position: absolute !important;
	animation: momoAnimationTextF 8s linear infinite;/* js中的8秒，原因在这里 */
	z-index: 101;
	left: 50%;
	top: 300px;
}
@keyframes momoAnimationTextF{
	from {
		left:-10px;transform: translateX(-100%);
	}
	to {
		left:101%;transform: translateX(0);/* left 101%是因为不让客户看到闪动的高度变化 */
	}
}

html

<div class="myvideolr" id="myvideolr">
	<video id="videomad" class="video-js"></video>
</div>

code关键代码详解：

1.vue项目中安装video.js
npm install video.js

2.文件中引用videojs和相关样式
import videojs from 'video.js';
import 'video.js/dist/video-js.css';

3.data对象里面定义userObj（用户登录信息），playerOptions（播放器配置），animationTextTop（自定义组件随机滚动高度），player（播放器），timeEight（定时器）。

4.从后台拿视频链接，我的是changeVideo这个方法。

5.在获取到后台视频链接的地方初始化播放器（包括自定义组件），我的是dealVideoSrc这个方法。

6.在视频播放器初始化完成后，调用定时器，设置自定义组件的高度，我的是setTimeEightTop这个方法。

7.在重新获取视频链接的时候销毁播放器，定时器，以及重新定义播放器的层，因为dispose方法会将video标签也删掉。我的是changeVideo这个方法里面。

8.定时器的时间和css的时间要一致哦，不然，文字在飘的时候，客户就能看到文字突然换了个高度，很不友好。

9.在页面关掉时销毁播放器，定时器。

10.认真看代码哦，好像没什么好讲的了，不懂欢迎评论，嘻嘻。

总结：

1.vue的定时器哪里都能用啊，哈哈哈，不一定非要在mounted中调用

2.videojs真的是个好东西，会用一点了，就再也不想用其他封装好的插件了。

3.定时器，播放器一定要记得清除，原因未知，但是个好习惯。