项目中遇到的一些小问题记录

1. video禁止画中画
   video标签添加ref='video'
   vue代码中添加this.$refs.video['disablePictureInPicture'] = true;

2. 去掉video的control控制条中的全屏按钮：css设置

   video::-webkit-media-controls-fullscreen-button {            
   	display: none;
   }
   

3. 获取video原始宽高

   var video = document.querySelector('video');
   video.addEventListener('canplay', function () {
       this.width = this.videoWidth;
       this.height = this.videoHeight;
   });
   

   videoWidth 和 videoHeight 属性为视频真实宽高，这两个属性为只读属性，赋值不会生效；

width 和 height 属性为视频在页面上显示的尺寸，可以在元素设置或JS赋值；
width 和 height 属性优先级低于样式，同时使用样式和属性设置宽高，最后生效的是样式；

3. video标签已经设置poster封面了，点击播放完就没有封面了
   添加ended事件重置下src就行了

    var v = document.getElementsByTagName('video')[0];
       v.addEventListener('ended', function () {
           this.src = "http://img.youguoquan.com/uploads/crowd/videos/2017/07/28/8a5852432f0d496964240b1f41aa3ab9.MP4"
       }, false);
   

4. 全屏和取消全屏

   requestFullscreen(ele) {// ele为要设置成全屏的元素，可为div或video或其他元素
         if (ele.requestFullscreen) {
             ele.requestFullscreen();
         } else if (ele.webkitRequestFullscreen) {
             ele.webkitRequestFullscreen();
         } else if (ele.mozRequestFullScreen) {
             ele.mozRequestFullScreen();
         } else if (ele.msRequestFullscreen) {
             ele.msRequestFullscreen();
         }
     },                   
     // 取消全屏
     exitFullscreen() {
         if (document.exitFullscreen) {
             document.exitFullscreen();
         } else if (document.webkitExitFullscreen) {
             document.webkitExitFullscreen();
         } else if (document.msExitFullscreen) {
             document.msExitFullscreen();
         } else if (document.mozCancelFullScreen) {
             document.mozCancelFullScreen();
         }
     }
   

5. 判断当前是否在全屏状态

   isFullScreen () {
      return document.isFullScreen || document.mozIsFullScreen || document.webkitIsFullScreen
   },
   

6. 在全屏元素上覆盖别的元素（如弹幕）
   webkit内核在全屏元素上会设置z-index: 2147483647（最大值）
   如果要在其上加别的按钮，就将别的按钮设置z-index: 2147483647
7. 监听全屏改变事件

   document.addEventListener("fullscreenchange", () => {
     that.isFull = !that.isFull;
   });
   document.addEventListener("mozfullscreenchange", () => {
     that.isFull = !that.isFull;
   });
   document.addEventListener("webkitfullscreenchange", () => {
     that.isFull = !that.isFull;
   });
   document.addEventListener("msfullscreenchange", () => {
     that.isFull = !that.isFull;
   });
   
   

8. 浏览器禁止长按出菜单
   给body添加oncontextmenu="forbidMenu()"
   在js中添加

   function forbidMenu(){
       window.event.returnValue=false;  
       return false;  
   }