vue中使用 vue-video-player的几个问题
video.js 插件在vue中是 vue-video-player;我们在vue中播放视频可以使用这个插件;下面简单描述几个使用中的问题,不涉及其他问题:1. 自定义播放处理 , 我们自己如何去触发播放这个事件2. 播放,停止触发的函数相关处理;3. 在安卓的微信中播放视频不能播放的问题;1. 自定义播放,假设现在自己写了一个button, 或者其他什么东...
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>
更多推荐
所有评论(0)