乐趣区

关于html5:在原生开发中控制HTML5视频

jiezi

前言

有人可能会问，在现在各种前端框架和开发工具横行的年代，还用得上原生开发吗？作为一名从业 18 年的前端讲师，我要通知大家学习原生开发的长处：

  1. 原生开发有助于同学们从原理上意识前端常识，并在实质上学会它。
  2. 原生开发有助于锤炼同学们的编程程度，进步大家对前端常识的了解。
  3. 正所谓万变不离其宗，做过我的项目开发的人们都晓得，无论用什么框架，也是要用到扎实的 JavaScript 功底的。
  4. 以小程序开发为例，如果用户要在小程序中增加一个十分长的页面，有的时候还是须要应用来实现的，这就可能会波及到原生页面的制作。

明天我就为大家讲一讲在原生开发过程中，标记对遇到的一些问题以及这些问题的解决方案。

一、video 标记对的属性

上面列出了 video 标记对在开发过程中罕用的原生属性。

二、video 标记对的办法

上面列出了 video 标记对在开发过程中罕用的原生办法。

三、video 标记对的事件

上面列出了 video 标记对在开发过程中罕用的原生事件以及事件的触发机制。

四、PC 端 video 标记对的问题

1、视频如何自动播放

以后的浏览器都曾经将视频的自动播放性能去掉了，也就是说在标记对上应用 autoplay 属性也无奈实现视频的自动播放性能。
然而如果为标记对增加上 autoplay 属性的同时设置其静音播放是能够实现的。

<video src=“video/01.mp4”autoplay muted loop></video>

2、视频的全屏播放

有的视频是要在页面中实现主动全屏播放的，这类视频往往在页面一进入时就可能占据整个屏幕。目标是显示酷炫的视频成果，而不是展现声音，因而能够静音自动播放。

HTML 代码如下所示：

<video src=“video/01.mp4”class=“bgVideo”autoplay muted loop></video>

CSS 代码如下所示：

.bgVideo{
    width:100%;height: 100%;
    min-height: 1080px;
    object-fit: cover;
}

3、视频全屏后导致的垂直滚动条问题

有的视频因为高度过大，在全屏播放后会在页面中产生垂直滚动条。如果不想让页面产生垂直滚动条，即在一屏中显示所有内容包含视频，则能够依照如下的 CSS 代码进行设置。

.bgVideo{
    position:fixed; 
    z-index:-1000;
}

五、挪动端 video 标记对的问题

1、【IOS】iPhone 系列手机中视频的内联播放问题

应用 IOS 零碎的设施，视频在播放时会主动“竖屏全屏”，也就是说在这类设施中单击视频播放按钮，视频不会在页面原有的地位中“内联播放”，而是会呈现相似于全屏的模式。即页面展现为彩色的背景，然而视频在手机竖屏的状况下播放。


这个问题能够通过在标记对中增加属性的形式来解决。

  • IOS10 及其以上版本的操作系统能够反对 playsinline 属性。
  • IOS10 以下版本的操作系统只能应用 -webkit-playsinline 属性。

所以，HTML 代码如下所示：

<video playsinline webkit-playsinline></video>

2、【Android】多个视频同时播放问题

一个页面下若有多个视频，这样的状况在 Andro 零碎中可能会呈现多个视屏同时播放的景象。
该问题的解决原理：在一个视频的 play 事件中，将其余所有的视频都暂停掉。

jQuery 代码如下所示：

$("video").on("play",function(){
    var reg=/android/i;
    if(reg.test(navigator.userAgent)){var currentVideo=$(this).get(0);
       for(var i=0;i<$("video").length;i++){if($("video").get(i)!==currentVideo){$("video").get(i).pause();}
       }
   }
})

留神：在视频的 play 事件中不要再调用 play() 办法，免得产生堆栈溢出。

3、在挪动端自定义视频的管制按钮

对于不显示零碎原生控制面板的视频，应用本人制作的元素来管制视频的播放与暂停。

jQuery 代码如下所示：

$(".control").on("touchstart",function(){var node=$(this).next().get(0);
    if(node.paused){node.play();        
        $(this).find("img").css("display","none");
    }else{node.pause();
        $(this).find("img").css("display","inline");
    }
}).on("touchend",function(){var node=$(this).next().get(0);
    node.muted=false;
})

留神：此时视频在 HTML 文档中必须设置为静音状态。

4、补充：挪动端如何判断用户设施是 IOS 设施还是 Android 设施

应用 navigator.userAgent 属性来判断返回值当中是否带有特定的字符串。

（1）断定 Android 设施：

var reg=/android/gi;
if(reg.test(navigator.userAgent)){console.log(“这是 Android 设施”);
}

（2）判断 IOS 设施：

var reg=/(iphone)|(ipad)|(ipod)/gi;
if(reg.test(navigator.userAgent)){console.log(“这是 ISO 设施”);
}

5、补充：【IOS】为适配 iPhoneX 设施制作两套页面

因为 iPhoneX 及其以上的设施高度远远大于 iPhoneX 以下的产品（高度大于 812px），因而对于具备全屏背景的页面须要为大高度的设施再做一套页面，或者判断设施加载不同的背景图片。

那么如何判断 IOS 设施是否是 iPhoneX 以上的设施呢？代码如下所示。

if(screen.height>=812){
   //iPhoneX 系列的大高度设施
   location.href=“indexX.html”;
}

总结

相对来说，视频成果再原生开发过程中的状况还是比较复杂的，同学们在接触这类我的项目时，应该多积攒具体问题的解决方案，这样能力举一反三，让本人变成我的项目经验丰富的程序员。

退出移动版