videoJs常用方法、事件、VUE中使用的注意事项

Vue中使用原生videojs进行播放rtmp格式的视频流（类似直播）
1.vue中使用videoJS 如果需要播放flash视频，需要下载5.0及以下的版本，否则无法播放falsh
2.参考文档1（options参数，版本下载）
3.参考文档2（videoJS 常用事件及方法）
4.参考文档（demo及参数和事件）
5.vue中动态切换src的方法（见：mounted函数）

<template><div><div><video ref="viodeRef" id="video2"class="video-js vjs-default-skin vjs-big-play-centered"controlspreload="auto"width="640"height="264"poster="http://static.qiakr.com/app/full_res.jpg"><!--type="application/x-mpegURL"--><source :src="playOptions.source[0].src" ><p class="vjs-no-js">不支持播放</p></video><div  class="actions"><a href="javascript:;" id="btn1">播放</a><a href="javascript:;" id="btn2">暂停</a><a href="javascript:;" id="btn3">隐藏音量调节控件</a><a href="javascript:;" id="btn4">设置宽高</a><a href="javascript:;" id="btn6">隐藏</a><a href="javascript:;" id="btn5">显示</a><a href="javascript:;" id="btn7">设置其它资源</a><a href="javascript:;" id="btn8">销毁</a></div><router-link to="/lazyload">跳转</router-link><div class="methods" style="font-size: 18px;text-align: left;margin-left: 50px;background-color: skyblue">方法：autoplay：自动播放    <br>buffered   <br>bufferedEnd   <br>bufferedPercent  <br>cancelFullScreen：取消全屏  deprecated    <br>controls      <br>currentSrc   <br>currentTime:当前时间    <br>currentType <br>dispose:销毁实例，在退出页面的时候 一定要销毁 <br>duration <br>ended <br>error <br>exitFullscreen   <br>init  :初始化     <br>isFullScreen deprecated  //摈弃   <br>isFullscreen ：全屏（用这个方法前先使用 requestFullscreen）    <br>language  <br>load  <br>loop  <br>muted  <br>pause  <br>paused  <br>play  <br>playbackRate  <br>poster  <br>preload:预加载，一般直接用auto 根据浏览器自动执行加载  <br>remainingTime  <br>requestFullScreen deprecated <br>requestFullscreen <br>seeking  <br>src <br>volume :静音 <br>addChild inherited <br>addClass inherited <br>buildCSSClass inherited <br>children inherited <br>contentEl inherited<br>createEl inherited<br>dimensions inherited<br>el inherited<br>enableTouchActivity inherited<br>getChild inherited<br>getChildById inherited<br>hasClass inherited<br>height inherited<br>hide inherited<br>id inherited<br>initChildren inherited<br>name inherited<br>off inherited<br>on inherited  ：绑定事件<br>one inherited<br>options inherited：视频参数 是一个对象<br>player inherited<br>ready inherited<br>removeChild inherited<br>removeClass inherited<br>show inherited<br>trigger inherited<br>triggerReady inherited<br>width inherited<br></div><div style="font-size: 16px;background-color: beige;text-align: left;margin-left: 50px;margin-top: 50px;">事件：<br>durationchange<br>ended<br>firstplay<br>fullscreenchange<br>loadedalldata<br>loadeddata<br>loadedmetadata<br>loadstart<br>pause<br>play<br>progress<br>seeked<br>seeking<br>timeupdate<br>volumechange<br>waiting<br>resize inherited<br></div></div></div>
</template><script>import videojs from  'video.js/dist/video.min'import 'video.js/dist/video-js.min.css'
//  import 'videojs-flash'import 'videojs-flash/dist/videojs-flash';export default {name: 'Videojs',data:function () {return {playOptions:{autoplay: false, // 自动播放controls: true, // 是否显示控制栏notSupportedMessage: '此视频暂无法播放，检查相机状态是否正常或请查看是否安装flash',//无法播放时显示的信息techOrder: ['flash', 'html5'],// 兼容顺序sourceOrder: true,flash: {swf: '../../../static/VideoJS.swf'   //如果是本地视频  需要相应的videoJS.swf文件},source:[{type: 'rtmp/flv',src:'rtmp://184.72.239.149/vod/&mp4:BigBuckBunny_115k.mov'}],poster:'', //播放器 默认图片
//              controlBar: {                     // 配置控制栏
//                timeDivider: false, // 时间分割线
//                durationDisplay: false, // 总时间
//                progressControl: true, // 进度条
//                customControlSpacer: true, // 未知
//                fullscreenToggle: true // 全屏
//              },},myPlayer:''}},mounted:function () {//切换src的方法：//---(一定要在load里面添加上url，然后执行play函数，play函数执行后会自动执行ready,loadedmetadata,timeupdate等函数)_this.myPlayer.off('timeupdate'); //移除timeupdate事件_this.myPlayer.reset(); //重置 video_this.myPlayer.src([                     {type: 'rtmp/mp4',src: _this.currentSrc},]);_this.myPlayer.load( _this.currentSrc);_this.myPlayer.play();//-----------------------------------------------------------------------endconst _this = this;_this.myPlayer = videojs('video2',_this.playOptions,function () {//--------methodsthis.load();this.play();//this.pause();//暂停//------events    绑定事件用on    移除事件用offthis.on('loadstart',function () {console.log('loadstart------------')});this.on('loadedmetadata',function () {console.log('loadedmetadata---视频源数据加载完成----')});this.on('loadeddata',function () {console.log('loadeddata---渲染播放画面----');//autoPlay必须为false});this.on('progress',function () {console.log('progress-------加载过程----')});this.on('timeupdate',function () {const curTime = this.currentTime();
//              console.log('timeupdate-------------',curTime);})this.off('timeupdate',function () {console.log('off----------')})});},methods:{},beforeDestroy:function(){const videoDom = this.$refs.viodeRef;  //不能用document 获取节点videojs(videoDom).dispose();  //销毁video实例，避免出现节点不存在 但是flash一直在执行，报 this.el.......is not function}}
</script><style scope></style>

videoJs常用方法、事件、VUE中使用的注意事项相关推荐

在vue中，Echarts雷达图中indicator的点击事件，不能改变data中的值的解决方法
在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的值的解决方法参考文章: (1)在vue中,Echarts雷达图中indicator的点击事件,不能改变data中的 ...
「后端小伙伴来学前端了」Vue中全局事件总线（GlobalEventBus）原理及探究过程
前言上一篇文章写了 Vue 中的自定义事件,自定义事件是全局事件总线基础.我在上一篇文章中埋下了一个小小的伏笔.如下图: 我说过,在Vue中如果我们用(@orv-on)给组件绑定上一个自定义事件,其 ...
「后端小伙伴来学前端了」关于Vue中的自定义事件，组件绑定自定义事件实现通信
傍晚的月亮前言原本这篇打算写Vue中的那个全局事件总线的原理,但是发现自己少写了这个自定义事件,不讲明白这个自定义事件的操作,不好写全局事件原理,于是就有了这篇文章拉. 一.v-on指令要讲自定 ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
vue中img标签onerror事件
vue中img标签onerror事件使用:onerror去绑定事件该方法能正确处理onerror事件,并防止闪图 <img type="image/x-icon" :sr ...
vue中使用v-on绑定事件中，获取$event.currentTarget，日志打印为null
问题:vue中使用v-on绑定事件中,获取$event.currentTarget,日志打印为null dom结构: <li @click="clickEvent('hello',$e ...
vue中点击事件的写法_vue中的事件：原生事件与自定义事件__Vue.js
模板编译 processAttrs 对于ast attributes处理(v-on/@) 利用onRE与dirRE来捕获事件这里最重要的就是dynamic的判断,vue中可以用动态参数来命名事件名称 ...
初识 Vue（11）---(Vue 中的事件绑定)
Vue 中的事件绑定案例:点击 Hello World ,从黑变红,再次点击,从红变黑... 通过 class 来实现页面效果的变更方法一:(通过对象)对象绑定 <!DOCTYPE h ...
vue划入划出事件_基于vue中对鼠标划过事件的处理方式详解
鼠标事件进行监听需求中,在一个table(组件)表中,对于其中一列(该列为图片列),当鼠标划过该列的某个单元格子(图片)时,需要展示出该单元格子对应的遮罩层翻阅了一些博客,发现好多都提到了mous ...
vue中常用的事件修饰符
在事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求.尽管我们可以在方法中轻松实现这点,但更好的方式是:方法只有纯粹 ...

videoJs常用方法、事件、VUE中使用的注意事项

videoJs常用方法、事件、VUE中使用的注意事项相关推荐

最新文章

热门文章