vue 踩过的坑 --- vue-video-player

最新推荐文章于 2025-08-02 09:00:00 发布

原创最新推荐文章于 2025-08-02 09:00:00 发布 · 2.8w 阅读

26 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

5 篇文章

订阅专栏

博主在使用vue-cli做直播时选用vue-video-player作为直播流播放器，介绍了其安装、main.js配置和页面部分。还提及适配兼容问题，如样式修改不生效的解决办法，以及配置选项中control未生效的处理方式。同时强调不要自行安装依赖的video.js，否则会冲突报错。

vue 踩过的坑 — vue-video-player

最近做直播，需要直播流播放器，由于用的是vue-cli，找了些插件，最终选定vue-video-player ,使用流程及一些问题的解决方案如下：

安装
npm install vue-video-player -S
npm install --save videojs-contrib-hls(如果做直播的话必须要安装)
main.js 配置
//引入css
require(‘vue-video-player/src/custom-theme.css’)
require(’…/static/css/myvideo.css’) //如果你需要自定义播放器的样式，自己新建一个css
//引入video插件
import VideoPlayer from ‘vue-video-player’
//引入 hls
import ‘videojs-contrib-hls’
页面部分
List item

		<video-player  class="video-player vjs-custom-skin" id="myVideo"
            ref="videoPlayer"
                :playsinline="true"
                :options="playerOptions"
                @statechanged="playerStateChanged($event)"
                 @play="onPlayerPlay($event)"
                @error="onError($event)" 
            ></video-player>

	 @play = "fun($event)" 事件绑定方式，参见官方文档 其中$event 为实例化的player

		export default {
			data(){
				return {
					playerOptions:{},//存放播放器的配置文件
				}
			}，
			methods:{
			    onLive(onM3u8,onCover){
			       var that = this
				        
				        this. playerOptions =  {
				            notSupportedMessage: "此视频暂无法播放，请稍后再试",
				            autoplay: false, //如果true,浏览器准备好时开始回放。
				            loop: false, // 导致视频一结束就重新开始。
				           // preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
				            language: 'zh-CN',
				            aspectRatio:"16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
				            fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
				            sources: [{
				                type: "application/x-mpegURL", //如果是直播的话  此处务必这样配置
				                src:onM3u8,//视频url地址
				            }],
				            poster: onCover, //你的封面地址
				            width: document.documentElement.clientWidth,
				            control: { //此处的设置都未生效，不知道为啥，我用爆破的方式解决的
				                timeDivider: false,
				                durationDisplay: false,
				                remainingTimeDisplay: false,
				                fullscreenToggle: true //全屏按钮
				            }
				            
				        }
				 }
			}，
			mounted(){
				this.onLive(newM3u8,newCover)
			}
		｝

适配和兼容
当需要修改播放器的一些样式，发现在在当前页面的style中修改，并不生效，即使加了 “！important”，经调查发现，样式没有修改成功是因为加载顺序的问题而并非权重（我这么认为的对不对不知道）
解决方案：
mainjs 里面引入了自定义的css文件 myvideo.css
类似如下：