关于video标签的总结

发表于 | 分类于 | 阅读次数：

一. video标签的基本属性及基本事件。

  1. 基本属性

    1
    2
    3
    4
    5
    6
    7
    8
    9
    autoplay: false  	    是否自动播放
    controls: false     	    是否显示播放控件
    loop: false      	    是否是循环播放
    muted: false    	    是否是静音播放
    poster:""      		    在播放第一帧之前显示的海报
    preload:       		    视频预加载策略
        auto:      			    预加载视频元数据和缓冲一定时长
        metadata:  			    只加载	元数据(第一帧画;时长)
        none:      			    不加载任何数据

  2. 基本事件

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    duration:                   总时长
    paused:true                 当前视频是否处于暂停状态 true是暂停 false是播放
    volume:1                    当前音量
    playbackRate:               回放速率  大于1快放 不于1慢放

    成员方法===
    play()                      播放视频
    pause()                     暂停视频

    成员事件==
    onplay                      当视频开始播放时触发的事件
    onpause                     当视频暂停播放时触发的事件

二. 在移动端设备 video 标签的使用及踩坑

1
2
3
4
5
6
7
8
9
<video  src=""  id="myVideo"  
        x5-playsinline=""  poster=""      
        x-webkit-airplay="allow" preload="auto"
        autoplay  x5-video-player-type="h5"
        x5-video-player-fullscreen="true" 
        x5-video-ignore-metadata='true'
        controls webkit-playsinline="true" playsinline 
        width='100%' height='100%'>
 </video>

  1. 如何让视屏与页面在同一层级 标签上需要添加

    1
    2
    3
    x5-video-player-type="h5" 
    5-video-player-fullscreen="true" 
    <!-- 让播放的视频与页面同层显示 不然视频会悬浮 -->

  2. 如何禁止video在ios系统中自动全屏播放

    1
    x5-playsinline   webkit-playsinline="true" playsinline

三. 在PC端 video 的使用及踩坑

  1. 如何禁止用户下载视屏

    • 从HTML=> 添加禁止下载属性 controlslist=”nodownload” 但任然有浏览器可以下载

    • 从|CSS=> 

      1
      2
      3
      4
      5
      6
      7
      8
      9
      video::-internal-media-controls-download-button {
          display:none;
      }
      video::-webkit-media-controls-enclosure {
          overflow:hidden;
      }
      video::-webkit-media-controls-panel {
          width: calc(100% + 30px); 
      }

    • 从JS=>

      1. 针对uc自定义悬浮下载按钮解决办法
        uc浏览器会给每个video添加 uc-video-toolbar-id 扩展属性 之要将这个属性去除就可以了
        $(‘#my-video’).attr(‘uc-video-toolbar-id’,’’)
        document.getElementById(‘my-video’).setAttribute(‘uc-video-toolbar-id’,’’)
        document.getElementById(‘my-video’).removeAttribute(‘uc-video-toolbar-id’)// 直接删除添加的属性