vue-video-player 更改视频源

2018-05-05

背景:根据用户的信息来显示不同的视频源

<template>
    <div class="video-box-wrap" v-show="video.show">
        <div class="video-box">
            <em class="video-close"  @click="showVideo(false)"></em>
            <video-player  class="video-player vjs-custom-skin"
                        ref="videoPlayer"
                        :options="playerOptions"
                        :playsinline="true"
                        customEventName="customstatechangedeventname"
                        @play="onPlayerPlay($event)"
                        @pause="onPlayerPause($event)"
                        @ready="playerReadied">
            </video-player>
        </div>
    </div>
</template>
export default {
    data () {
        return {
            playerOptions: {
                    // videojs options
                    muted: true,
                    language: 'en',
                    playbackRates: [0.7, 1.0, 1.5, 2.0],
                    sources: [{
                        type: "video/mp4",
                        src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                        // src: "http://www.17sucai.com/preview/501914/2017-08-04/%E9%A1%B5%E9%9D%A2/media/mov_bbb.mp4"
                    }],
                    muted: false, // 默认情况下将会消除任何音频。
                    loop: false,
                    language: 'zh-CN',
                    fluid: true, // 当true时,Video.js player将拥有流体大小。换句话说,它将按比例缩放以适应其容器。
                    poster: "/static/images/author.jpg",
                    width: 700,
                    notSupportedMessage: '此视频暂无法播放,请稍后再试', //允许覆盖Video.js无法播放媒体源时显示的默认信息。
                },
        }
    },
    methods: {
        showVideo (bol) {
            let myPlayer = this.$refs.videoPlayer.player;
            if( bol ) {
                myPlayer.src(this.getUserType); //根据userType的不同展示不同的视频地址
              return false
            };
        }
    },
    computed: {
        getUserType () {
            let userType = parseInt(this.userInfo.userType);
            let videoSrc = ""
            if(userType === 1){
                videoSrc = "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
            }else if (userType === 2){
                videoSrc = "http://www.17sucai.com/preview/501914/2017-08-04/%E9%A1%B5%E9%9D%A2/media/mov_bbb.mp4"
            }
            return videoSrc;
        }
    }
}

初始 playerOptions.sources.src必须有值,否则后续视频的进度条会有问题 //感觉我使用的是最笨的方法,如果有更好的方法,望留言指教>_<

原文链接:segmentfault.com

上一篇:node项目实战-用node-koa2-mysql-bootstrap搭建一个前端论坛
下一篇:对MVVM架构的一些理解
相关教程
关注微信

扫码加入 JavaScript 社区

相关文章

首次访问,需要验证
微信扫码,关注即可
(仅需验证一次)

欢迎加入 JavaScript 社区

号内回复关键字:

回到顶部