vue使用video.js进行视频播放功能


Posted in Javascript onJuly 18, 2019

关于video.js

video.js是一个拥有h5背景的网络视频播放器,同时支持h5以及Flash视频播放(可加载本地静态资源视频以及网络链接视频)

官网:videojs.com/

安装

npm  install video.js

main.js中引入

import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video

使用

<div class="demo1-video">  
 <video id="myVideo"    
   class="video-js vjs-default-skin vjs-big-play-centered" 
   controls  //确定播放器是否具有用户可以与之交互的控件。没有控件,启动视频播放的唯一方法是使用autoplay属性或通过Player API。
   autoplay: "muted", // //自动播放属性,muted:静音播放
   preload="auto"  //建议浏览器是否应在<video>加载元素后立即开始下载视频数据。
   poster="../assets/img/E0531.jpg">   //设置视频封面    <source src="../assets/video/E0531.mp4" type="video/mp4" >  //视频地址
  </video>   
 </div>

可以直接使用css来控制video的宽高

实现的效果截图

vue使用video.js进行视频播放功能

以上:对于video.js的一次简单应用就完成啦

总结

以上所述是小编给大家介绍的vue使用video.js进行视频播放功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript 内存回收机制理解
Jan 17 Javascript
javascript 密码框防止用户粘贴和复制的实现代码
Feb 17 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
Sep 04 Javascript
深入浅析knockout源码分析之订阅
Jul 12 Javascript
javascript验证手机号和实现星号(*)代替实例
Aug 16 Javascript
JavaScript组合模式学习要点
Aug 26 Javascript
详解JavaScript中return的用法
May 08 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
vue proxyTable 接口跨域请求调试的示例
Sep 12 Javascript
解决vue-quill-editor上传内容由于图片是base64的导致字符太长的问题
Aug 20 Javascript
小程序实现五星点评效果
Nov 03 Javascript
OpenLayers加载缩放控件使用方法详解
Sep 25 Javascript
百度小程序之间的页面通信过程详解
Jul 18 #Javascript
微信小程序如何获取群聊的openGid以及名称详解
Jul 17 #Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 #Javascript
微信小程序从注册账号到上架(图文详解)
Jul 17 #Javascript
js设置默认时间跨度过程详解
Jul 17 #Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
Jul 17 #Javascript
初试vue-cli使用HBuilderx打包app的坑
Jul 17 #Javascript
You might like
火车头discuz6.1 完美采集的php接口文件
2009/09/13 PHP
非常好用的Zend Framework分页类
2014/06/25 PHP
php单链表实现代码分享
2016/07/04 PHP
Laravel Validator 实现两个或多个字段联合索引唯一
2019/05/08 PHP
PHP大文件分块上传功能实例详解
2019/07/22 PHP
主页面中的两个iframe实现鼠标拖动改变其大小
2013/04/16 Javascript
js页面跳转的常用方法整理
2013/10/18 Javascript
js 定时器setTimeout无法调用局部变量的解决办法
2013/11/28 Javascript
JS控制弹出新页面窗口位置和大小的方法
2015/03/02 Javascript
js实现透明度渐变效果的方法
2015/04/10 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
修改ligerui 默认确认按钮的方法
2016/12/27 Javascript
bootstrap表格分页实例讲解
2016/12/30 Javascript
基于AGS JS开发自定义贴图图层
2017/03/31 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
Javascript中八种遍历方法的执行速度深度对比
2017/04/25 Javascript
关于webpack代码拆分的解析
2017/07/20 Javascript
vue实现手机号码抽奖上下滚动动画示例
2017/10/18 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
vue组件间的参数传递实例详解
2019/04/26 Javascript
[01:05:59]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python回文字符串及回文数字判定功能示例
2018/03/20 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
python脚本开机自启的实现方法
2019/06/28 Python
通过实例了解python property属性
2019/11/01 Python
Python谱减法语音降噪实例
2019/12/18 Python
Python定义一个函数的方法
2020/06/15 Python
使用pygame实现垃圾分类小游戏功能(已获校级二等奖)
2020/07/23 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
美国地毯购买网站:Rugs USA
2019/02/23 全球购物
质量整改通知单
2015/04/21 职场文书
Canvas三种动态画圆实现方法说明(小结)
2021/04/16 Javascript
解决WINDOWS电脑开机后桌面没有任何图标
2022/04/09 数码科技
MySQL自定义函数及触发器
2022/08/05 MySQL