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 相关文章推荐
使用jQuery简化Ajax开发 Ajax开发入门
Oct 14 Javascript
Domino中运用jQuery读取视图内容的方法
Oct 21 Javascript
html 锁定页面(js遮罩层弹出div效果)
Oct 27 Javascript
jQuery Ajax使用 全解析
Dec 15 Javascript
浅析JS操作DOM的一些常用方法
May 13 Javascript
Centos7 中安装 Node.js v4.4.4
Nov 03 Javascript
javascript 删除数组元素和清空数组的简单方法
Feb 24 Javascript
浅谈Vue 数据响应式原理
May 07 Javascript
微信小程序手机号码验证功能的实例代码
Aug 28 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
ES2020 新特性(种草)
Jan 12 Javascript
json.stringify()与json.parse()的区别以及用处
Jan 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
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
JavaScript 学习笔记(十一)
2010/01/19 Javascript
Ajax异步提交表单数据的说明及方法实例
2013/06/22 Javascript
JavaScript中创建字典对象(dictionary)实例
2015/03/31 Javascript
react中使用swiper的具体方法
2018/05/15 Javascript
浅谈KOA2 Restful方式路由初探
2019/03/14 Javascript
setTimeout与setInterval的区别浅析
2019/03/23 Javascript
微信小程序单选radio及多选checkbox按钮用法示例
2019/04/30 Javascript
vue props 单项数据流实例分享
2020/02/16 Javascript
使用Vue 自定义文件选择器组件的实例代码
2020/03/04 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
微信小程序实现页面左右滑动
2020/11/16 Javascript
python实现定制交互式命令行的方法
2014/07/03 Python
Python如何生成树形图案
2018/01/03 Python
Python序列循环移位的3种方法推荐
2018/04/09 Python
python 分离文件名和路径以及分离文件名和后缀的方法
2018/10/21 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python数据预处理之数据标准化的几种处理方式
2019/07/17 Python
python爬虫爬取幽默笑话网站
2019/10/24 Python
基于python+selenium的二次封装的实现
2020/01/06 Python
Python使用xlrd实现读取合并单元格
2020/07/09 Python
python根据字典的键来删除元素的方法
2020/08/16 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
美国南加州的原创极限运动潮牌:Vans(范斯)
2016/08/05 全球购物
德国BA保镖药房韩文网:kr.ba.de
2017/09/04 全球购物
怎样自定义一个异常类
2016/09/27 面试题
弘扬雷锋精神活动演讲稿
2014/03/04 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
公司活动总结怎么写
2014/06/25 职场文书
2014年小学教师工作自我评价
2014/09/22 职场文书
单身申明具结书
2015/02/26 职场文书
警告通知
2015/04/25 职场文书
入党自传范文2015
2015/06/26 职场文书
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
python绘制简单直方图(质量分布图)的方法
2022/04/21 Python