h5的video标签

在vue项目中video动态绑定的实现

使用computed

 <span v-html="video" ></span> 

computed: {
    video: function () {
      return ` <video  controls x5-playsinline="true" 
                 controlslist="nodownload"
 		         playsinline  	webkit-playsinline="true" preload="auto" 
                 x5-video-player-type='h5'
                 poster='${this.pic3}' >
                    <source  type="video/mp4"  src='${this.video_url}'/>  
                    <source  type="video/ogg"  src='${this.video_url}'/>  
                </video>`;
    },
  },

苹果手机添加 <source  type="video/ogg"  src=''/> 可以实现播放功能

属性描述

controlslist="nodownload"      是否可以下载

playsinline = "true"           IOS微信浏览器支持小窗内播放 

webkit-playsinline = "true"    这个属性是ios 10 中设置可以让视频在小窗内播放 ， 
                               也就是不是全屏播放 

x5-video-player-type = "h5"     启用H 5 播放器 , 是wechat安卓版特性