# 一、安装依赖 yarn add video.js //安装video.js yarn add videojs-contrib-hls // 播放流的话需要安装 hls插件 # 二、引入video.js ### 在plugins文件夹下创建 hls.js ```js import Vue from 'vue'; import 'videojs-contrib-hls'; const hls = require('videojs-contrib-hls'); Vue.use(hls); ``` #### 在 nuxt.config.js 中引用video.js样式 ```js css: ['video.js/dist/video-js.css'] ``` #### 三、在使用video.js的页面中引用 video.js ```js import Videojs from 'video.js'; // 引入Videojs ``` ### 1、测试使用video.js #### 初始化videoJs ```js initVideo(nowPlayVideoUrl) { let that = this; // 重定向this // 这些options属性也可直接设置在video标签上，见 muted let options = { controls: true, //确定播放器是否具有用户可以与之交互的控件。没有控件，启动视频播放的唯一方法是使用autoplay属性或通过Player API。 // autoplay: "muted",//自动播放属性,muted:静音播放 preload: 'auto', //预加载 auto 自动 fluid: true, // 自适应宽高 language: 'zh-CN', // 设置语言 // poster: require('@/assets/images/train/1.png'), //播放前显示的视频画面，播放开始之后自动移除。通常传入一个URL // inactivityTimeout: false,//显示时间 // width:'100%', // height:'210px' sources: [ // 注意，如果是以option方式设置的src,是不能实现换台的 (即使监听了nowPlayVideoUrl也没实现) { src: nowPlayVideoUrl, type: 'application/x-mpegURL', // 告诉videojs,这是一个hls流 }, ], controlBar: false, }; // videojs的第一个参数表示的是，文档中video的id let myPlayer = Videojs('videoPlayer', options, function onPlayerReady() { console.log('onPlayerReady 中的this指的是：', this); // 这里的this是指Player,是由Videojs创建出来的实例 that.volumeProgress(); this.on('loadedmetadata', function () {}); // 视频播放时更新当前播放进度 this.on('timeupdate', function () { that.durationimeVue(); // 更新播放进度 if (!that.ischange) { // 当拖拽进度条是不更新进度条 that.cacheProgress(); } }); // 视频缓冲进度 this.on('progress', function () {}); this.on('play', function () { //播放 that.playstart = true; //控制显示播放暂停按钮 }); this.on('pause', function () { //暂停 that.playstart = false; //控制显示播放暂停按钮 }); this.on('volumechange', function (e) { //音量改变 if (!that.volumeChange) { that.volumeProgress(); } }); }); that.myPlayer = myPlayer ``` ##### 温馨提示； onPlayerReady() 方法中是video 初始化完成后触发的事件，this.on('××××××××', function () {}); 是初始化完成后或视频播放过程中触发的事件； ##### 监听事件\ this 指的是video实例 ```js this.on('suspend', function() {//延迟下载 console.log("延迟下载") }); this.on('loadstart', function() { //客户端开始请求数据 console.log("客户端开始请求数据") }); this.on('progress', function() {//客户端正在请求数据 console.log("客户端正在请求数据") }); this.on('abort', function() {//客户端主动终止下载（不是因为错误引起） console.log("客户端主动终止下载") }); this.on('error', function() {//请求数据时遇到错误 console.log("请求数据时遇到错误") }); this.on('stalled', function() {//网速失速 console.log("网速失速") }); this.on('play', function() {//开始播放 console.log("开始播放") }); this.on('pause', function() {//暂停 console.log("暂停") }); this.on('loadedmetadata', function() {//成功获取资源长度 console.log("成功获取资源长度") }); this.on('loadeddata', function() {//渲染播放画面 console.log("渲染播放画面") }); this.on('waiting', function() {//等待数据，并非错误 console.log("等待数据") }); this.on('playing', function() {//开始回放 console.log("开始回放") }); this.on('canplay', function() {//可以播放，但中途可能因为加载而暂停 console.log("可以播放，但中途可能因为加载而暂停") }); this.on('canplaythrough', function() { //可以播放，歌曲全部加载完毕 console.log("可以播放，歌曲全部加载完毕") }); this.on('seeking', function() { //寻找中 console.log("寻找中") }); this.on('seeked', function() {//寻找完毕 console.log("寻找完毕") }); this.on('timeupdate', function() {//播放时间改变 console.log("播放时间改变") }); this.on('ended', function() {//播放结束 console.log("播放结束") }); this.on('ratechange', function() {//播放速率改变 console.log("播放速率改变") }); this.on('durationchange', function() {//资源长度改变 console.log("资源长度改变") }); this.on('volumechange', function() {//音量改变 console.log("音量改变") }); ``` ##### 常用方法 ```js player.play(); // 播放 player.pause(); // 暂停 player.currentTime(); // 播放时长、可以根据此方法更改播放时间 player.currentTime(time); player.duration(); // 视频总播放时长， player.volume(); // 声音，可以根据 player.volume(volume) 改变声音声音大小（0-1之间） player.muted(Boolean) // 是否静音 player.requestPictureInPicture() //开启画中画 player.buffered(); 缓冲，就是返回下载了多少 player.bufferedPercent();百分比的缓冲 player.width(); //获取宽度 player.width(640) 设置宽度 player.height(); //获取高度设置高度player.height(480); ``` ##### 视频状态与播放状态 ```js player.controls();//是否有默认控制条 player.currentTime(); = value; //当前播放的位置，赋值可改变位置 player.startTime(); //一般为0，如果为流媒体或者不从0开始的资源，则不为0 player.duration(); //当前资源长度流返回无限 player.paused(); //是否暂停 player.defaultPlaybackRate(); = value;//默认的回放速度，可以设置 player.playbackRate(); = value;//当前播放速度，设置后马上改变 player.played(); //返回已经播放的区域，TimeRanges，关于此对象见下文 player.seekable();//返回可以seek的区域 TimeRanges player.ended();//是否结束 player.autoPlay(); //是否自动播放 player.loop(); //是否循环播放 ``` ##### 自定义全屏退出全屏按钮 ```js //开启全屏 let playerHtml = this.$refs.videobox; // 包裹video标签 bom if (playerHtml.requestFullscreen) { playerHtml = playerHtml.requestFullscreen(); } else if (playerHtml.mozRequestFullScreen) { playerHtml = playerHtml.mozRequestFullScreen(); } else if (playerHtml.msRequestFullscreen) { playerHtml = playerHtml.msRequestFullscreen(); } else if (playerHtml.webkitRequestFullscreen) { playerHtml = playerHtml.webkitRequestFullScreen(); } //退出全屏 if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } ``` 四、附上代码 ```js ``` #### 效果展示 ![企业微信截图_16469819516661.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ee85f56a9c1d42ebae9ec7f8da7dc09a~tplv-k3u1fbpfcp-watermark.image?)