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 相关文章推荐
通过Mootools 1.2来操纵HTML DOM元素
Sep 15 Javascript
jQuery实现折叠、展开的菜单组效果代码
Sep 16 Javascript
JS组件系列之Bootstrap Icon图标选择组件
Jan 28 Javascript
JavaScript从0开始构思表情插件
Jul 26 Javascript
JavaScript注册时密码强度校验代码
Jun 30 Javascript
简单实现js放大镜效果
Jul 24 Javascript
js实现移动端轮播图效果
Dec 09 Javascript
jQuery 防止相同的事件快速重复触发方法
Feb 08 jQuery
微信小程序用户信息encryptedData详解
Aug 24 Javascript
微信小程序顶部导航栏滑动tab效果
Jan 28 Javascript
微信小程序实现左滑动删除效果
Mar 30 Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 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 session 预定义数组
2009/03/16 PHP
php修改时间格式的代码
2011/05/29 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
关于php程序报date()警告的处理(date_default_timezone_set)
2013/10/22 PHP
php过滤所有的空白字符(空格、全角空格、换行等)
2015/10/27 PHP
PHP文件与目录操作示例
2016/12/24 PHP
基于php编程规范(详解)
2017/08/17 PHP
Laravel中前端js上传图片到七牛云的示例代码
2017/09/04 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
Js控制滑轮左右滑动实例
2015/02/13 Javascript
js实现交换运动效果的方法
2015/04/10 Javascript
javascript实现tab切换的四种方法
2015/11/05 Javascript
JS中常用的正则表达式
2016/09/29 Javascript
js捕捉键盘事件和按键键值的方法
2016/10/10 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
微信小程序 下拉列表的实现实例代码
2017/03/08 Javascript
Angular自定义组件实现数据双向数据绑定的实例
2017/12/11 Javascript
ES6 Set结构的应用实例分析
2019/06/26 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
全面解析JavaScript Module模式
2020/07/24 Javascript
Python编程之微信推送模板消息功能示例
2017/08/21 Python
Python实现将一个正整数分解质因数的方法分析
2017/12/14 Python
PyCharm在新窗口打开项目的方法
2019/01/17 Python
Django2 连接MySQL及model测试实例分析
2019/12/10 Python
使用Nibabel库对nii格式图像的读写操作
2020/07/01 Python
基于 HTML5 的 WebGL 3D 版俄罗斯方块的示例代码
2018/05/28 HTML / CSS
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
数据库测试通常都包括哪些方面
2015/11/30 面试题
敏捷开发的主要原则都有哪些
2015/04/26 面试题
AJAX应用和传统Web应用有什么不同
2013/08/24 面试题
写一个方法,输入一个文件名和一个字符串,统计这个字符串在这个文件中出现的次数
2016/04/13 面试题
毕业生优秀推荐信
2013/11/26 职场文书
工伤调解协议书
2016/03/21 职场文书
Python使用Kubernetes API访问集群
2021/05/30 Python