Web 视频播放器 vue-video

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

Vue-video 视频播放器

vue.js 简介

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。

： » Web 视频播放器 vue-video