<div id='cs' class="videolayer"> <video src="videos/hlj.mp4" controls="controls" playsinline webkit-playsinline="true" poster="img/hlj.jpg"></video> </div>
1. controls 是自帶屬性,暫停、重播、放大、控制進度。但是如果要求更高,就需要一些插件了。下面是鏈接地址。
video.js https://github.com/videojs/video.js
西瓜視頻播放器(HTML5) http://h5player.bytedance.com/api/#%E5%B1%9E%E6%80%A7
2. playsinline webkit-playsinline="true" 可用於防止ios用戶視頻播放自動全屏(safari是頑疾暫時沒辦法搞定),android是不自動全屏的。
3. poster="img/hlj.jpg" poster 是視頻封面設置,未播放時默認封面。
4. src="" 要播放的視頻的 URL。
5. width 設置視頻播放器的寬度(單位是px)(我比較偏好在視頻外層設置一個層,限制寬高,視頻寬 100%)
6. height 設置視頻播放器的高度(單位是px)
以上是自己的一些小的總結。
https://segmentfault.com/a/1190000006857675 剛剛看了這篇文章,建議看看,關於video 兼容、去除控件、全屏的問題。