Web 视频播放器 vue-video

今天要分享的?Vue-video 是一个针对 Vue.js 的 HTML5 视频播放器组件。它的源代码托管在 github :https://github.com/hilongjw/vue-video。demo演示地址:https://hilongjw.github.io/vue-video/ocean.html。

更多精彩内容请看 web前端中文站
www.lisa33xiaoq.net 可按Ctrl + D 进行收藏

Vue-video 视频播放器

Web 视频播放器 vue-video

vue.js 简介

Web 视频播放器 vue-video

Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。

采用了 Vue.js 库的同学,那么 vue-video 对你来说就是最好的选择。

安装 vue-video

vue-video 的安装很简单,只需执行如下命令即可。

 npm i vue-video --save-dev

应用 vue-video

先编写页面代码,如下所示:

 <template>     
 <div id="app">         
 <div class="container">             
 <my-video :sources="video.sources" :options="video.options"></my-video>
 </div>     
 </div> 
 </template>

再引入如下 javascript 代码:

 // script import myVideo from 'vue-video' export default {     
 data () {         
 return {             
 video: {                 
 sources: [{                     
 src: 'http://covteam.u.qiniudn.com/oceans.mp4',                     
 type: 'video/mp4'}],                 
 options: {                     
 autoplay: true,                     
 volume: 0.6,                     
 poster: 'http://covteam.u.qiniudn.com/poster.png'}}}},     
 components: {         
 myVideo} }

vue-video api

vue-video 中只有一个重要的 API :sources。用法如下:

 sources: [{     
 // video uri     
 src: 'http://covteam.u.qiniudn.com/oceans.mp4',     
 // video meta type     
 type: 'video/mp4' }]

相关参数如下:

 options: {     
 // autoplay     
 autoplay: true,     
 // default volume    
 volume: 0.6,     
 // poster (cover image)     
 poster: 'http://covteam.u.qiniudn.com/poster.png'}

其他扩展用法请参考官方源码实例:https://github.com/hilongjw/vue-video。

【注:本文源自网络文章资源,由站长整理发布】

2
如无特殊说明,文章均为原作者原创,转载请注明出处

该文章由 发布

这货来去如风,什么鬼都没留下!!!
发表我的评论

Hi,请填写昵称和邮箱!

取消评论
代码 贴图 加粗 链接 删除线 签到