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 相关文章推荐
js hover 定时器(实例代码)
Nov 12 Javascript
MyEclipse取消验证Js的两种方法
Nov 14 Javascript
Linux下编译安装php libevent扩展实例
Feb 14 Javascript
简单实现js页面切换功能
Jan 10 Javascript
AngularJS基础 ng-focus 指令简单示例
Aug 01 Javascript
AngularJs expression详解及简单示例
Sep 01 Javascript
React Native第三方平台分享的实例(Android,IOS双平台)
Aug 04 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
JS设计模式之访问者模式定义与用法分析
Feb 05 Javascript
webpack将js打包后的map文件详解
Feb 22 Javascript
解决在layer.open中使用时间控件laydate失败的问题
Sep 11 Javascript
vue实现两个组件之间数据共享和修改操作
Nov 12 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不用第三变量交换2个变量的值的解决方法
2013/06/02 PHP
php数组索引的Key加引号和不加引号的区别
2014/08/19 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
javascript dom 操作详解 js加强
2009/07/13 Javascript
原生javascript实现隔行换色
2015/01/04 Javascript
Jquery组件easyUi实现表单验证示例
2016/08/23 Javascript
JS给Array添加是否包含字符串的简单方法
2016/10/29 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
EditPlus中的正则表达式 实战(2)
2016/12/15 Javascript
详谈Angular路由与Nodejs路由的区别
2017/03/05 NodeJs
vue综合组件间的通信详解
2017/11/06 Javascript
JavaScript防止全局变量污染的方法总结
2018/08/02 Javascript
Vue封装的可编辑表格插件方法
2018/08/28 Javascript
使用 electron 实现类似新版 QQ 的登录界面效果(阴影、背景动画、窗体3D翻转)
2018/10/23 Javascript
从vue源码看props的用法
2019/01/09 Javascript
js实现web调用摄像头 js截取视频画面
2019/04/21 Javascript
Vue中axios拦截器如何单独配置token
2019/12/27 Javascript
浅析Vue 中的 render 函数
2020/02/28 Javascript
关于element的表单组件整理笔记
2021/02/05 Javascript
Python随机生成数模块random使用实例
2015/04/13 Python
Python+OpenCV让电脑帮你玩微信跳一跳
2018/01/04 Python
Python检查图片是否损坏及图片类型是否正确过程详解
2019/09/30 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
python openCV自制绘画板
2020/10/27 Python
详解Selenium 元素定位和WebDriver常用方法
2020/12/04 Python
装上这 14 个插件后,PyCharm 真的是无敌的存在
2021/01/11 Python
html5视频自动横过来自适应页面且点击播放功能的实现
2020/06/03 HTML / CSS
StubHub哥伦比亚:购买和出售您的门票
2016/10/20 全球购物
中专生自荐信
2013/10/12 职场文书
服务之星事迹材料
2014/05/03 职场文书
申论倡议书范文
2014/05/13 职场文书
信用卡逾期证明示例
2014/09/13 职场文书
红领巾广播站广播稿
2014/10/19 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
优秀创业计划书分享
2019/07/19 职场文书