vue中使用 vue-video-player的几个问题

Dear 丶 2022-02-04 04:41 1460阅读 0赞

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>