// 获取dom中所有的video标签var videotags = document.querylectorall('video');// 控制播放的视频暂停var pauall = function () { // 改变this指向 var lf = this; [].foreach.call(videotags, function (i) { i !== lf && i.pau(); })以退为进;}// 改变dom数组中的数组元素，call() 改变this指向[].foreach.call(videotags, function (i) { i.addeventlistener('play', pauall.bind(i)); });注：call()：调用一个对象的一个方法，用另一个对象替换当前对象，例如：arraya.call(a,args1,args2)，即a对象调用arraya对象的方法。
<!doctype html><html lang="en"><head> <meta chart="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, ur-scalable=no" /> <meta content="black" name="apple-mobile-web-app-status-bar-style" /> <meta http-equiv="x-ua-compatible" content="ie=edge,chrome=1" /> <meta content="yes" name="apple-mobile-web-app-capable" /> <meta content="telephone=no" name="format-detection" /> <title>gst</title> <!-- css样式 --> <style> * { margin: 0; padding: 0; /* 禁止模板复制 */ -webkit-ur-lect: none; -moz-ur-lect: none; -ms-ur-lect: none; ur-lect: none; } html, body { font-size: 16px; background: #fff; font-family: 'franklin gothic medium', 'arial narrow', arial, sans-rif; } /* 主要style代码： */ #app { width: 100vw; min-height: 100vh; height: auto; overflow: hidden; overflow-y: scroll; /* 防止ios卡顿 */ -webkit-overflow-scrolling: touch; } ul.box { width: 100%; display: -webkit-flex; display: flex; flex-direction: column; } ul.box li { display: block; margin-top: .12rem; } ul.box li>p { box-sizing: border-box; padding: 0 .1rem; line-height: .4rem; font-size: .3rem; } ul.box li>video { margin-top: .1rem; width: 100%; height: auto; object-fit: fill; overflow: hidden; } </style></head><body> <div id="app"> <ul class="box" id="videobox"> <li> <p>1、挪威理想国</p> <video controls controlslist="nodownload" disablepict做生日贺卡ureinpicture playsinline="" x5-playsinline="" playsinline="" webkit-playsinline="" poster="https://cs.xinpianchang.com/uploadfile/article/2019/11/05/5dc0e9357cad8.jpeg@960w_540h_1e_1c.jpg" src="https://qiniu-xpc10.xpccdn.乡村基优惠券com/5c54f52f221d1.mp4"></video> </li> <li> <p>2、我是阿迪达斯-灰太狼！</p> <video controls controlslist="nodownload" disablepicture投资研究报告inpicture playsinline="" x5-playsinline="" playsinline="" webkit-playsinline="" poster="https://cs.xinpianchang.com/uploadfile/article/2019/11/05/5dc051a64adbc.jpeg@960w_540h_1e_1c.jpg" src="http://oldvod2.v.news.cn/1f/fe/1f74d72eedda3dc922b3487f49619c4730b4fbfe.mp4"></video> </li> </ul> </div></body></html>注：#app 默认最小高度：min-height：100vh，高度：height：auto，溢出时隐藏：overflow: hidden，y轴时滚动：overflow-y: scroll。
<video controls controlslist="nodownload" disablepictureinpicture x5-video-player-type='h5' x5-video-player-fullscree收敛数列的保号性n='true' playsinline webkit-playsinline x-webkit-airplay="allow" poster="" src="" ></video>
注：属性简介
controls：向用户显示控件，比如播放按钮；autoplay：视频在就绪后马上播放；controlslist=”nodownload” ：隐藏video标签下载按钮；disablepictureinpicture：隐藏video标签画中画；x5-video-player-type=’h5′：启用x5内核的h5播放器；x5-video-player-fullscreen=’true’： 全屏设置；x5-video-player-orientation=”portraint”：声明播放器支持的方向，横屏：landscape，竖屏：portraint，默认竖屏播放，无论是直播还是全屏h5一般都是竖屏播放，但是该属性需要x5-video-player-type开启h5模式；playsinline：内联播放；webkit-playsinline：内联播放；x-webkit-airplay=”true /allow”：支持airplay的设备；poster=””：规定视频下载时现实的图像，或者在用户点击播放按钮前显示的图像；src=””：要播放视频的url；loop：当前媒介文件完成播放之后再次开始播放（循环播放）；preload：视频在页面加载时进行加载，并预备播放；width：设置视频播放器的宽度；height：设置视频播发器的高度；muted：规定视频的音频输出应该被静音；style=”object-fit:fill;” css3样式设置填充整个屏幕video铺满整个屏幕，不按照视频的原始比例通过属性的设置和样式的控制让视频全屏显示；
本文发布于:2023-04-03 09:12:43，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/af46eac4266f746b78f6085be5c36ff0.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：单个视频播放控制&默认横屏播放.doc
本文 PDF 下载地址：单个视频播放控制&默认横屏播放.pdf
| 留言与评论（共有 0 条评论） |
