一、視頻列表中控制只允許一個視頻播放 註： call() ：調用一個對象的一個方法，用另一個對象替換當前對象，例如： arrayA.call(A,args1,args2) ，即 A 對象調用 arrayA 對象的方法。 二、視頻列表播放時滑動頁面抖動 註 ： app 預設最小高度： min heig ...
一、視頻列表中控制只允許一個視頻播放
// 獲取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標簽相關屬性簡介
<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>註：屬性簡介
- 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鋪滿整個屏幕，不按照視頻的原始比例
通過屬性的設置和樣式的控制讓視頻全屏顯示；
