vue.js 视频播放
Posted PeterWolf
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue.js 视频播放相关的知识,希望对你有一定的参考价值。
最近心学习vue.js开发,video开发播放!
使用第三方的封装:https://github.com/hilongjw/vue-video;
1. npm install vue-video --save 安装播放第三方插件;
2.
// 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 } }
<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 视频播放的主要内容,如果未能解决你的问题,请参考以下文章
vue.js项目实战运用篇之抖音视频APP-第八节: 视频播放功能
vue.js项目实战运用篇之抖音视频APP-第五节:视频播放列表组件功能