前言有人会问，在各种前端框架和开发工具横行的今天，还有必要使用原生开发吗？作为一名入行18年的前端讲师，我想告诉大家学习原生开发的好处：原生开发帮助学生从原理上理解前端知识，从本质上学习。原生开发有助于锻炼学生的编程水平，提高大家对前端知识的理解。俗话说，万事如意。做过项目开发的都知道，不管用什么框架，同样需要扎实的JavaScript基础。以开发小程序为例，如果用户想在小程序中添加一个很长的页面，有时候还是需要使用它来实现，这可能会涉及到原生页面的制作。今天给大家说说标记对在原生开发过程中遇到的一些问题以及这些问题的解决方法。1.video标签对的属性下面列出video标签对开发过程中常用的原生属性。2.视频标签对的方法下面列出了视频标签对开发过程中常用的原生方法。3.视频标签对的事件下面列出了视频标签对开发过程中常用的原生事件及其触发机制。四、PC端视频标签对的问题1、如何自动播放视频目前的浏览器都去掉了视频的自动播放功能，也就是说，即使有视频也无法实现视频的自动播放功能autoplay属性用于标签对。但是如果给markerpair加上autoplay属性，同时设置它的静音播放是可以实现的。2.视频全屏播放有些视频需要在页面自动全屏播放，而这类视频在进入页面时往往会占满整个屏幕。目的是展示炫酷的视频效果，而不是声音，因此可以将自动播放静音。HTML代码如下：CSS代码如下：.bgVideo{width:100%;height:100%;最小高度：1080px；object-fit:cover;}3.视频全屏导致的垂直滚动条问题部分视频由于高度过高，全屏播放后页面出现垂直滚动条。如果不想让页面产生垂直滚动条，即一屏显示包括视频在内的所有内容，可以按照下面的CSS代码设置。.bgVideo{位置：固定；z-index:-1000;}五、移动端视频标记问题1、【IOS】iPhone系列手机内联视频播放问题使用IOS系统设备，播放时视频会自动“竖屏全屏”，也就是说，如果你在这类设备上点击视频播放按钮，视频不会在页面原来的位置“内联播放”，而是会以类似全屏的方式出现。即页面显示为黑色背景，但手机竖屏时播放视频。这个问题可以通过给标签对添加属性来解决。IOS10及以上操作系统可以支持playsinline属性。IOS10以下操作系统版本只能使用-webkit-playsinline属性。因此，HTML代码如下：2.【Android】多个视频同时播放。同时播放两个视频。这个问题的解决方案：在一个视频的播放事件中，所有其他视频都暂停。jQuery代码如下所示：$("video").on("play",function(){varreg=/android/i;if(reg.test(navigator.userAgent)){varcurrentVideo=$(this).get(0);for(vari=0;i<$("video").length;i++){if($("video").get(i)!==currentVideo){$("video").get(i).pause();}}}})注意：不要在视频的播放事件中调用play()方法，以免堆栈溢出。3.自定义移动端视频控制按钮。对于不显示系统原生控制面板的视频，使用自己的元素来控制视频的播放和暂停。jQuery代码如下所示：$(".control").on("touchstart",function(){varnode=$(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(){varnode=$(this).next().get(0);node.muted=false;})注意：此时视频必须在HTML文档中设置为静音。4、补充：移动端如何判断用户设备是IOS设备还是Android设备，使用navigator.userAgent属性判断返回值是否包含特定字符串。(1)判断Android设备：varreg=/android/gi;if(reg.test(navigator.userAgent)){console.log("ThisisanAndroiddevice");}(2)判断IOS设备：varreg=/(iphone)|(ipad)|(ipod)/gi;if(reg.test(navigator.userAgent)){console.log("ThisisanISOdevice");}5.补充：【IOS】for适配为iPhoneX设备制作两套页面由于iPhoneX及以上设备比iPhoneX产品高很多（高度大于812px），所以对于全屏背景的页面，需要为大屏幕设备制作另一套页面高度，或确定设备加载不同的背景图像。那么如何判断IOS设备是否为iPhoneX以上的设备呢？代码如下所示。if(screen.height>=812){//iPhoneX系列大屏设备location.href="indexX.html";}总结相对来说，视频效果再原生开发过程中的情况还是比较比较复杂，同学们在接触这类项目的时候，应该多积累具体问题的解决方案，做到举一反三，举一反三，让自己成为项目中有经验的程序员。
