猎野人电影完整版,终极一班2下载mp4,英伦宝贝童话屋
// 获取dom中所有的video标签 var videotags = document.queryselectorall('video'); // 控制播放的视频暂停 var pauseall = function () { // 改变this指向 var self = this; [].foreach.call(videotags, function (i) { i !== self && i.pause(); }); } // 改变dom数组中的数组元素,call() 改变this指向 [].foreach.call(videotags, function (i) { i.addeventlistener('play', pauseall.bind(i)); });
注:call():调用一个对象的一个方法,用另一个对象替换当前对象,例如:arraya.call(a,args1,args2),即a对象调用arraya对象的方法。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-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-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } html, body { font-size: 16px; background: #fff; font-family: 'franklin gothic medium', 'arial narrow', arial, sans-serif; } /* 主要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" disablepictureinpicture 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" disablepictureinpicture 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-fullscreen='true' playsinline webkit-playsinline x-webkit-airplay="allow" poster="" src="" ></video>
注:属性简介
通过属性的设置和样式的控制让视频全屏显示;
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
h5页面唤起app如果没安装就跳转下载(iOS和Android)
浅析数据存储的三种方式 cookie sessionstorage localstorage 的异同
React Native超简单完整示例-tabs、页面导航、热更新、用户行为分析
React componentWillMount、componentDidMount、componentWillUpdate和componentDidUpdate生命周期函数的详解
详解canvas.toDataURL()报错的解决方案全都在这了
网友评论