处理视频问题（IOS和安卓）

处理视频问题（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>