vue.js 視頻播放

標籤：lan   export   封裝   tar   post   from   save   component   uri   

最近心學習vue.js開發，video開發播放！

使用第三方的封裝：https://github.com/hilongjw/vue-video；

1. npm install vue-video --save 安裝播放第三方外掛程式；

2.

// scriptimport 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    }}

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

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‘}

vue.js 視頻播放