处理视频问题(IOS和安卓)
vue中
层级问题解决:
<video id="videoPlay" src="视频地址" webkit-playsinline playsinline x5-playsinline></video>
template:
<div class="baotaVideo padding">
<div @click="playVideo" id="play" class="left pr">
<video v-if="isnow1" webkit-playsinline playsinline poster='封面图' class="video" id="videoPlay1"><source :src=videourl></source> 您的浏览器不支持 video 视屏播放。</video>
<video v-if="isnow" :src="videourl" poster='封面图' class="video" id="videoPlay">您的浏览器不支持 video 视屏播放。</video>
</div>
</div>
(jquery的第三方模块)
1.安装jquery
npm install jquery --save-dev
2.build/webpack.base.conf.js中,
导入:var webpack = require('webpack');
3.在module.exports里面加入:
plugins: [
new webpack.ProvidePlugin({
$:"jquery",
jQuery:"jquery",
"window.jQuery":"jquery"
})
]
script中:
export default {
name: "Video",
props:['videoSrc'], //这个地址是从父级组件拿的
data() {
return {
isnow: false,
isnow1: false,
isShow: false,
videourl:''
}
},
watch: {
videoSrc(newval, oldval){
this.videourl = newval
}
},
mounted(){
let _this = this;
$(function(){
var u = navigator.userAgent, app = navigator.appVersion;
var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //安卓
var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
if(isiOS){
_this.isnow1 = true;
$('#play').click(function(){
window.location = _this.videourl
});
}
if(isAndroid){
_this.isnow = true;
$('#play').click(function(){
_this.playVideo()
});
}
});
},
methods: {
playVideo(){
var vdo = document.getElementById("videoPlay");
this.isShow = !this.isShow;
if(this.isShow){
vdo.play();
}else{
vdo.pause();
}
}
}
stylus安装:
1.npm install stylus--save
2.npm install stylus-loader --save
style:
<style scoped lang="stylus" type="text/stylus">
.baotaVideo
margin-top .15rem
padding-top .2rem
font-size .14rem
display flex
justify-content space-between
.left
background #f7f7f7
width 100%
.video 此处可让视频的封面图铺满元素(引用时删掉这句话)
height 100%
object-fit fill
width 100%
</style>