Video.js

阿里云视频播放器使用，需要一个容器 <div id="player-con"></div> // 视频播放器的容器在Vue中 import Aliplayer from 'Aliplayer'import AliPlayerComponent from 'AliPlayerComponent'在vue.config.js中定义 module.exports = { configureWebpack: config => { config.externals = { Aliplayer: 'Aliplayer', AliPlayerComponent: 'AliPlayerComponent' } }}在created() 钩子函数中调用初始化播放器这里使用的是playauth 模式 _this.player = new Aliplayer({ id: "player-con", cover, vid, playauth, width: "100%", height: "100%", autoplay: false, isLive: false, rePlay: false, // 播放器自动循环播放。 playsinline: true, // H5是否内置播放，有的Android浏览器不起作用。 preload: true, // 播放器自动加载，目前仅h5可用。 useH5Prism: true, // 指定使用H5播放器。 // skinLayout 可以自定义 components: [{ // 试看组件的属性 name: 'PreviewVodComponent', type: AliPlayerComponent.PreviewVodComponent, args: [2, '<div class="tip-box">试看结束</div>', ''] }] }, function (player) { player.on('timeupdate', () => { // 播放位置发生改变时触发，仅H5播放器。 let time = player.getCurrentTime() // 获取播放的时间 if (time >= 2) { // 时间达到试看时间后把对应的video隐藏，防止安卓浏览器劫持不显示试看组件的提示 document.querySelector('video').style.display = 'none' document.querySelector('.prism-big-play-btn').style.width = '0' _this.seeEnd = true // player.off('timeupdate') // 取消订阅该事件 } }) // 试看结束后元素需要做的事情在这里处理 document.querySelector('.tip-box').addEventListener('click', function () { console.log('试看结束弹窗click事件') }) } )document.querySelector('video').style.display = 'none' 因为部分安卓不支持试看，其原因是安卓的浏览器劫持了视频，播放使用的不是我们的播放器而是自己的播放器，此时试看结束的弹窗就不会出现，这里在试看结束的时候将video标签隐藏，此时浏览器的播放器就不起作用力，此时我们试看的那个弹窗就会出现。 document.querySelector('.prism-big-play-btn').style.width = '0' 该操作是为了去掉暂停按钮，因为我们的项目中的试看结束有会有一个暂停按钮，此时蒙层后面还有一个暂停按钮，使用这个就不显示了，display：none,不能处理因为在这之后还会去调用暂停事件，暂停的时候会将这个重新改为block，如果在暂停的事件中处理使用setTimeout事件中可以处理，但是会有闪动，因此我们使用的width = 0； ...

视频才用流媒体，有后台实时返回数据， 要支持flash播放， 所以需安装对应的flash插件。当视频播放时，每间隔3秒向后台发送请求供检测心跳，表明在线收看状态,需要后台持续发送视频数据。 1. yarn add video.js videojs-flash2. 创建videp.js声明文件 3. 创建video_player.vue组件，供外部调用。源码如下<script lang="ts">import { Component, Emit, Prop, Vue } from 'vue-property-decorator';import 'video.js/dist/video-js.css';import _videojs from 'video.js';const videojs = (window as any).videojs || _videojs;import 'videojs-flash';@Component({ name: 'video-player',})export default class VideoPlayer extends Vue { /* ------------------------ INPUT & OUTPUT ------------------------ */ @Prop({ type: Object, default: () => {}}) private options!: object; /* ------------------------ VUEX (vuex getter & vuex action) ------------------------ */ /* ------------------------ LIFECYCLE HOOKS (created & mounted & ...) ------------------------ */ private mounted() { this.player = videojs(this.$refs.videoPlayer, this.options, function onPlayerReady() { // console.log('onPlayerReady'); }); } private beforeDestroy() { if (this.player) { this.player.dispose(); } } /* ------------------------ COMPONENT STATE (data & computed & model) ------------------------ */ private player: any; /* ------------------------ WATCH ------------------------ */ /* ------------------------ METHODS ------------------------ */}</script><template><div class="module_video_player"> <video ref="videoPlayer" class="video-js" autoplay></video></div></template><style lang="stylus" scoped>@import '~@/assets/styles/var.styl';.module_video_player position relative width 780px</style>4. 在需要使用的模块（如show_monitor.vue）调用。组件创建后，向后台发送轻轻获取rtmp视频播放地址，并更新videoOptions中的src。触发video_player的创建、挂载等。import VideoPlayer from '@/components/video_player.vue';components: { VideoPlayer,} private videoOptions = { techOrder: ['flash', 'html5'], sourceOrder: true, flash: { hls: { withCredentials: false }, }, html5: { hls: { withCredentials: false } }, sources: [{ type: 'rtmp/flv', src: '', // 'rtmp://live.hkstv.hk.lxdns.com/live/hks2', // 香港卫视，可使用此地址测试 }], autoplay: true, controls: true, width: '778', height: '638', };<video-player :options="videoOptions" v-if="videoOptions.sources[0].src !== ''"></video-player>5. 心跳检测在show_monitor.vue创建时，新建定时器，每隔3秒向后台发送一个包含当前监控设备id的请求，告知后台此设备监控被调用播放。show_monitor.vue销毁时，清空定时器，后台将停止传输视频数据。 ...

最近的项目中需要播放视频，鉴于html5元素<video>的一些坑及不想自己造轮子，于是就找到了web端播放视频使用量最多的插件video.js，video.js是国外开发者开发的，英语本身就不好的我看英文文档简直是折磨，国内又没有中文文档，能搜的到的基本是简单的使用及最基本的api的介绍，想要实现一些自定义功能无从下手，所以我在这里整理一份我所遇到的问题及解决方法1、视频初始化video.js有两种初始化方式，一种是在video的html标签之中，一种是使用js来进行初始化1.1、在video中进行初始化<video id=“my-player” class=“video-js” controls preload=“auto” poster="//vjs.zencdn.net/v/oceans.png" width=“600” height=“400” data-setup=’{}’> <source src="//vjs.zencdn.net/v/oceans.mp4" type=“video/mp4”></source> <source src="//vjs.zencdn.net/v/oceans.webm" type=“video/webm”></source> <source src="//vjs.zencdn.net/v/oceans.ogv" type=“video/ogg”></source> <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>效果1.2、使用js进行初始化<!– vjs-big-play-centered可使大的播放按钮居住，vjs-fluid可使视频占满容器 –><video id=“myVideo” class=“video-js vjs-big-play-centered vjs-fluid”> <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><script>var player = videojs(document.getElementById(‘myVideo’), { controls: true, // 是否显示控制条 poster: ‘xxx’, // 视频封面图地址 preload: ‘auto’, autoplay: false, fluid: true, // 自适应宽高 language: ‘zh-CN’, // 设置语言 muted: false, // 是否静音 inactivityTimeout: false, controlBar: { // 设置控制条组件 /* 设置控制条里面组件的相关属性及显示与否 ‘currentTimeDisplay’:true, ’timeDivider’:true, ‘durationDisplay’:true, ‘remainingTimeDisplay’:false, volumePanel: { inline: false, } / / 使用children的形式可以控制每一个控件的位置，以及显示与否 / children: [ {name: ‘playToggle’}, // 播放按钮 {name: ‘currentTimeDisplay’}, // 当前已播放时间 {name: ‘progressControl’}, // 播放进度条 {name: ‘durationDisplay’}, // 总时间 { // 倍数播放 name: ‘playbackRateMenuButton’, ‘playbackRates’: [0.5, 1, 1.5, 2, 2.5] }, { name: ‘volumePanel’, // 音量控制 inline: false, // 不使用水平方式 }, {name: ‘FullscreenToggle’} // 全屏 ] }, sources:[ // 视频源 { src: ‘//vjs.zencdn.net/v/oceans.mp4’, type: ‘video/mp4’, poster: ‘//vjs.zencdn.net/v/oceans.png’ } ]}, function (){ console.log(‘视频可以播放了’,this);});</script>2、controlBar组件的说明playToggle, //播放暂停按钮volumeMenuButton,//音量控制currentTimeDisplay,//当前播放时间timeDivider, // ‘/’ 分隔符durationDisplay, //总时间progressControl, //点播流时，播放进度条，seek控制liveDisplay, //直播流时，显示LIVEremainingTimeDisplay, //当前播放时间playbackRateMenuButton, //播放速率，当前只有html5模式下才支持设置播放速率fullscreenToggle //全屏控制currentTimeDisplay,timeDivider,durationDisplay是相对于 remainingTimeDisplay的另一套组件，后者只显示当前播放时间，前者还显示总时间。若要显示成前者这种模式，即 ‘当前时间/总时间’，可以在初始化播放器选项中配置：var myPlayer = neplayer(‘my-video’, {controlBar:{ ‘currentTimeDisplay’:true, ’timeDivider’:true, ‘durationDisplay’:true, ‘remainingTimeDisplay’:false}}, function() { console.log(‘播放器初始化完成’);});3、video.js样式修改.video-js{ / 给.video-js设置字体大小以统一各浏览器样式表现，因为video.js采用的是em单位 / font-size: 14px;}.video-js button{ outline: none;}.video-js.vjs-fluid,.video-js.vjs-16-9,.video-js.vjs-4-3{ / 视频占满容器高度 / height: 100%; background-color: #161616;}.vjs-poster{ background-color: #161616;}.video-js .vjs-big-play-button{ / 中间大的播放按钮 / font-size: 2.5em; line-height: 2.3em; height: 2.5em; width: 2.5em; -webkit-border-radius: 2.5em; -moz-border-radius: 2.5em; border-radius: 2.5em; background-color: rgba(115,133,159,.5); border-width: 0.12em; margin-top: -1.25em; margin-left: -1.75em;}.video-js.vjs-paused .vjs-big-play-button{ / 视频暂停时显示播放按钮 / display: block;}.video-js.vjs-error .vjs-big-play-button{ / 视频加载出错时隐藏播放按钮 / display: none;}.vjs-loading-spinner { / 加载圆圈 / font-size: 2.5em; width: 2em; height: 2em; border-radius: 1em; margin-top: -1em; margin-left: -1.5em;}.video-js .vjs-control-bar{ / 控制条默认显示 / display: flex;}.video-js .vjs-time-control{display:block;}.video-js .vjs-remaining-time{display: none;}.vjs-button > .vjs-icon-placeholder:before{ / 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样 / font-size: 22px; line-height: 1.9;}.video-js .vjs-playback-rate .vjs-playback-rate-value{ line-height: 2.4; font-size: 18px;}/ 进度条背景色 /.video-js .vjs-play-progress{ color: #ffb845; background-color: #ffb845;}.video-js .vjs-progress-control .vjs-mouse-display{ background-color: #ffb845;}.vjs-mouse-display .vjs-time-tooltip{ padding-bottom: 6px; background-color: #ffb845;}.video-js .vjs-play-progress .vjs-time-tooltip{ display: none!important;}4、动态切换视频<script> var data = { src: ‘xxx.mp4’, type: ‘video/mp4’ }; var player = videojs(‘myVideo’, {…}); player.pause(); player.src(data); player.load(data); // 动态切换poster player.posterImage.setSrc(‘xxx.jpg’); player.play(); // 销毁videojs //player.dispose();</script>5、设置语言5.1传统形式开发对于使用<script>标签形式的方式引入video.js，只需要在页面中引入你需要的语言包即可<script src="//example.com/path/to/lang/es.js"></script><script src="//example.com/path/to/lang/zh-CN.js"></script><script src="//example.com/path/to/lang/zh-TW.js"></script><script>var player = videojs(‘myVideo’, { language: ‘zh-CN’ // 初始化时设置语言，立即生效});/ 动态切换语言 使用这种方式进行动态切换不会立即生效，必须有所操作后才会生效。如播放按钮，必须点击一次播放按钮后播放按钮的提示文字才会改变 ///player.language(‘zh-TW’);</script>5.2、vue开发import Video from ‘video.js’/ 不能直接引入js，否则会报错：videojs is not defined import ‘video.js/dist/lang/zh-CN.js’ */import video_zhCN from ‘video.js/dist/lang/zh-CN.json’import video_en from ‘video.js/dist/lang/en.json’import ‘video.js/dist/video-js.css’Video.addLanguage(‘zh-CN’, video_zhCN);Video.addLanguage(’en’, video_en);6、未解决的问题控制条的高级自定义，如图中的进度条及时间在上面，播放按钮、上一个视频、下一个视频，设置及音量在下面这种控件该如何实现？如有知道实现这种高级自定义控制条方式的大神请在评论区留下您的代码7、参考文章视频云web播放器样式和组件自定义Video.js 踩坑简单入门免费视频播放器videojs中文教程 ...

video.js 默认效果是单击播放区域暂停需求：要实现单击播放区禁止暂停功能google发现有人提过这样的issue作者给出来答案，通过一段css来屏蔽.vjs-tech { pointer-events: none;}亲测有效本来想着通过找到触发pause事件的方法进行处理的，没想到通过css就可以搞定