Html5 – 沈焕杰的博客

Html5 10月 18,2018

h5新标签video详解

HTML5播放器细谈，从大众自带浏览器到 wechat和QQ以x5内核的浏览器，以及UC其他特殊的浏览器在此不再细谈：）当然也会分析iphone iOS系统和Android手机系统的差别。

【基本属性】video标签

属性：

src ：视频的属性，url地址
poster：视频封面，没有播放时显示的图片
preload：预加载|none|metadata（部分预加载）|auto。默认为auto
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度
其中： src地址可控制播放区域（调取native播放器（qq,uc等浏览器）的除外） 
【示例】 http://xxxx.com/video.mp4#t=10,20   表示播放范围10s-20s;
t=,02:00:00 从开始到两小时;t=60 从60s开始;t=,10.5 开始到10.5s

作者 shenhuanjie

Html5 10月 18,2018

JavaScript多个h5播放器video，点击一个播放其他暂停

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个H5播放器video 如何播放暂停</title>
</head>
<body>

    <video src="http://img.tianxiang.com/d/2018/06/5b1a45f89f96b.mp4" controls="controls"></video>
    <video src="http://vodfile12.news.cn/data/cdn_transfer/1F/FE/1f74d72eedda3dc922b3487f49619c4730b4fbfe.mp4" controls="controls"></video>

    <script type="text/javascript">
        var videos = document.getElementsByTagName('video');
            for (var i = videos.length - 1; i >= 0; i--) {
                (function(){
                    var p = i;
                    videos[p].addEventListener('play',function(){
                        pauseAll(p);
                    })
                })()
            }
            function pauseAll(index){
                for (var j = videos.length - 1; j >= 0; j--) {
                    if (j!=index) videos[j].pause();
                }
            };
    </script>

</body>
</html>

作者 shenhuanjie

日	一	二	三	四	五	六
« 4月
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Category Html5