vue中video.js的使用

安装及使用

video.js官网地址

1. npm安装

npm install video.js --save // 视频播放器插件
npm install videojs-contrib-hls  --save // 播放hls流插件 需要时安装

2. 引入样式文件

// 可以在main.js文件中引入，也可以在页面单独引入
import 'video.js/dist/video-js.css'  //videojs样式

3. 引入插件

// 在页面引入video.js插件
import videojs from "video.js"

4. 使用

<template>
	<video 
	   id="videobox" 
	   class="video-js vjs-default-skin vjs-big-play-centered vjs-16-9"  // video-js类必须要加
	   preload="auto"  // 是否预加载
	   width="100%"  // 宽度
	   ref="videoRef"  
	   autoplay="false"  // 自动播放
	   :poster="poster" // 封面图
	>
	   <source :src="src" /> // 视频地址
	</video>
</template>


<script setup>
import { ref, onMounted }
const videoRef = ref() // 获取video元素的引用实例对象
const src = ref()
const poster = ref()
const player = ref(null)

const init = () => {
// 这里的videoRef可以换成video元素的id "videobox"
	player.value = videojs(videoRef.value,
	{
		// 视频配置项
		//是否显示播放按钮
		bigPlayButton: true, 
		// 封面图
	    posterImage: true,
	    errorDisplay: false,
	    //设置小喇叭音量键
          controlBar: {
            fullscreenToggle: true,
            // 音量条的横向还是纵向显示
            volumePanel: {
              inline: false,
            },
          },
	    muted: true // //静音模式   解决首次页面加载播放。
	}) ,
	() => {
		player.value.on("play"), () => {
			console.log("开始播放")
		})
		// 设置默认2倍速
		player.value.playbackRate(2)
	}
}
// 最后运行init函数即可
onMounted(()=>{
	init();
})
</script>

注意：如果视频地址需要在挂载时通过接口异步获取，需要给init函数加一个定时器，否则会获取不到数据源而报错

例子：

<script>
	const src = ref('')
	const getUrl = async r => {
      const result = await reqUrl(id);
      if (result.code === 200) {
        src.value = result.url;
      }
    };
    onMounted(()=>{
		getUrl();
		// init(); // 此时会获取不到视频地址而报错，因为getUrl是异步执行，具体原因可以了解一下宏任务和微任务
		// 这时只需要加一个定时器即可解决
		setTimeout(() => {
        	init();
      }, 200);
	})
</script>

最好的解决办法就是单独把video封装成组件，在需要使用的页面引入并且传入video所需要的参数，如视频的配置项和播放地址，同时还便于复用。