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 视频播放的主要内容,如果未能解决你的问题,请参考以下文章

vuevideo基于vue.js的视频播放器组件

vue.js项目实战运用篇之抖音视频APP-第八节: 视频播放功能

vue.js项目实战运用篇之抖音视频APP-第五节:视频播放列表组件功能

视频播放平台vue-core-video-player

vue.js+video.js+videojs-contrib-hls支持PC端播放m3u8格式的视频

vue.js实现audio播放amr格式音频