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创建自己的插件(自定义插件)的方法
Jun 10 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
关于jquery ajax 调用带参数的webservice返回XML数据一个小细节
Jul 31 Javascript
jquery入门—选择器实现隔行变色实例代码
Jan 04 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
js获取form表单所有数据的简单方法
Aug 18 Javascript
利用纯js + transition动画实现移动端web轮播图详解
Sep 10 Javascript
Angular利用内容投射向组件输入ngForOf模板的方法
Mar 05 Javascript
JS中获取 DOM 元素的绝对位置实例详解
Apr 23 Javascript
vue 中filter的多种用法
Apr 26 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
Sep 18 Javascript
15个值得收藏的JavaScript函数
Sep 15 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
经典的星际争霸,满是回忆的BGM
2020/04/09 星际争霸
Windows下的PHP5.0安装配制详解
2006/09/05 PHP
PHP 截取字符串专题集合
2010/08/19 PHP
对于ThinkPHP框架早期版本的一个SQL注入漏洞详细分析
2014/07/04 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
yii框架搜索分页modle写法
2016/12/19 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
JQuery实现的在新窗口打开链接的方法小结
2010/04/22 Javascript
一些有用的JavaScript和jQuery的片段分享
2011/08/23 Javascript
location.href用法总结(最主要的)
2013/12/27 Javascript
JQuery基础语法小结
2015/02/27 Javascript
在JavaScript的正则表达式中使用exec()方法
2015/06/16 Javascript
JQuery.validate在ie8下不支持的快速解决方法
2016/05/18 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
Vue异步组件使用详解
2017/04/08 Javascript
vue中v-show和v-if的异同及v-show用法
2019/06/06 Javascript
解决vuex改变了state的值,但是页面没有更新的问题
2020/11/12 Javascript
js实现简单图片拖拽效果
2021/02/22 Javascript
[01:11]回顾历届DOTA2国际邀请赛中国区预选赛
2017/06/26 DOTA
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python3 使用map()批量的转换数据类型,如str转float的实现
2019/11/29 Python
Python更换pip源方法过程解析
2020/05/19 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
Html5页面二次分享的实现
2018/07/30 HTML / CSS
请写出一段Python代码实现删除一个list里面的重复元素
2015/12/29 面试题
高三毕业生自我鉴定
2013/12/20 职场文书
课改先进个人汇报材料
2014/01/26 职场文书
公司管理建议书范文
2014/03/12 职场文书
创业女性典型材料
2014/05/02 职场文书
班主任寄语2015
2015/02/26 职场文书
幼儿园重阳节活动总结
2015/05/05 职场文书
python使用XPath解析数据爬取起点小说网数据
2021/04/22 Python
Python Django模型详解
2021/10/05 Python
Linux系统下MySQL配置主从分离的步骤
2022/03/21 MySQL