vue封装一个视频组件(兼容ios和android)
做H5手机端的视频播放器,在期间发现了很多问题,哈哈,也是在不断摸索中成长,废话不多说,放代码:组件videoChild.vue文件:<template><div class="container" :class="[{an:isAndroid,ios:isiOS}]"><video id
·
做H5手机端的视频播放器,在期间发现了很多问题,哈哈,也是在不断摸索中成长,废话不多说,放代码:
组件videoChild.vue文件:
<template>
<div class="container" :class="[{an:isAndroid,ios:isiOS}]">
<video id="first-video"
width="100%"
height="100%"
x5-video-player-type="h5"
x5-video-player-fullscreen="true"
x5-playsinline=""
playsinline
webkit-playsinline=""
preload="auto"
:poster="poster"
:src="url"
:playOrPause="playOrPause"
x-webkit-airplay="allow"
@click="pauseVideo"
@ended="onPlayerEnded($event)"
>
</video>
<img v-show="isVideoShow" class="play" @click="playvideo" v-if="isiOS" :src="poster" />
<img v-show="isShow" class="platStart" @click="androidPlay" v-if="isAndroid" :src="poster">
</div>
</template>
<script>
export default {
name: 'videoChild',
props: {
'url': String,
'poster': String
},
data () {
var u = navigator.userAgent
return {
// poster: this.appConfig('app.img_url'),
// videoUrl: this.appConfig('app.video_url'),
isVideoShow: true,
isShow: true,
playOrPause: true,
video: null,
isAndroid: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, // android终端
isiOS: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) // ios终端
}
},
methods: {
playvideo (event) {
if (this.isiOS) {
let video = document.querySelector('video')
this.isVideoShow = false
video.play()
// 进入全屏
window.onresize = function () {
video.style.width = window.innerWidth + 'px'
video.style.height = window.innerHeight + 'px'
}
}
},
pauseVideo () { //暂停\播放
let video = document.querySelector('video')
if (this.playOrPause) {
video.pause()
} else {
video.play()
}
this.playOrPause = !this.playOrPause
},
onPlayerEnded (player) { //视频结束
this.isVideoShow = true
this.isShow = true
},
androidPlay () {
let video = document.querySelector('video')
this.isShow = false
video.play()
}
}
}
</script>
<style scoped>
#first-video{
object-fit: fill;
}
.container {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
}
.play,.platStart{
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 999;
width: 100%;
height: 100%;
object-fit: fill;
}
</style>
以上是组件的代码。如何调用请往下看:
<template>
<div class="container">
<child :url='videoURL' :poster="poster"></child>
</div>
</template>
<script>
import child from '@/components/videoChild'
export default {
name: 'app',
data() {
return {
videoURL:'你的视频路径',
poster: ''
}
},
components: {
child
}
}
</script>
更多推荐
已为社区贡献8条内容
所有评论(0)