video.js 插件在vue中是 vue-video-player;

我们在vue中播放视频可以使用这个插件；

下面简单描述几个使用中的问题，不涉及其他问题：

1.  自定义播放处理 ， 我们自己如何去触发播放这个事件

2.   播放，停止触发的函数相关处理；

3.   在安卓的微信中播放视频不能播放的问题；

 

1. 自定义播放，假设现在自己写了一个button, 或者其他什么东西放在视频上方，要求点击这个玩意儿播放视频，

     你也可以理解为播放按钮；  那么首先肯定得绑定事件，vue绑定事件就不说了，应该都会，那么在这个绑定的

      事件函数中，我们如何去播放视频呢？：this.$refs.videoPlayer.player.play(); 就可以了

2. 播放或者停止播放时，我想怎加一些额外的处理，那么可以在 <video-player  @play=...   @pause...>

     如下代码，在相应的函数中处理即可，还有其它的事件也都类似处理；

3.  在<video-player  :playsinline =....>  设置 playsinline 参数的时候，如果我们设置为true 或者 false 是会出问题的，

      所以需要根据情况进行处理，这里的情况一般是微信浏览器的 x5内核，需要设置为 false, 其它的设置为 true 即可；

      如果微信的 x5 设置为 true , 那么在安卓中微信环境下是无法播放的，是有问题的；

 

下面的代码是部分代码，仅供参考设置：

<template>
    <div class="video">
        <video-player  class="video-player-box"
                 ref="videoPlayer"
                 :options="playerOptions"
                 :playsinline="playsinline"
                 customEventName="customstatechangedeventname"
                 @play="onPlayerPlay($event)"
                 @pause="onPlayerPause($event)"
        >
        </video-player>
    </div>
</template>


<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'

export default {
    name: 'Video',
    props: {
        videoUrl: Object
    },
    data() {
        return{
            playerOptions: {
                playbackRates: [0.7, 1.0, 1.5, 2.0],
                autoplay: false,
                muted: false,
                loop: false,
                preload: 'auto', 
                language: 'zh-CN',
                aspectRatio: '16:9',
                fluid: true, 
                sources: [{
                    type: "video/mp4",
                    src: "https://cdn.theguardian.tv/webM/2015/07/20/150716YesMen_synd_768k_vp8.webm"
                }],
                poster: "http://localhost/547be638615da10.png",
                width: document.documentElement.clientWidth,
                notSupportedMessage: '此视频暂无法播放，请稍后再试',
                controlBar: {
                    timeDivider: true,
                    durationDisplay: true,
                    remainingTimeDisplay: false,
                    fullscreenToggle: true  //全屏按钮
                }
            },
            videoButton: require("../video_player.png"),
        }
    },
    components: {
        videoPlayer
    },
    mounted() {
      
      this.playerOptions.sources[0].src = this.videoUrl.a;
      this.playerOptions.poster = this.videoUrl.b
    },
    computed: {
      player() {
        return this.$refs.videoPlayer.player
      }，

      playsinline(){
        var ua = navigator.userAgent.toLocaleLowerCase();
        if (ua.match(/tencenttraveler/) != null || ua.match(/qqbrowse/) != null) {
            return false
        }else{
            return true             
        }
      }

    },
    methods: {
        clickStartButton: function(){
            this.$refs.videoPlayer.player.play();
        },
        onPlayerPlay(player) {
            this.videoPlayState = true;
        }
    }
}
</script>