关于在PC端浏览器使用基于H5背景视频的技术解决方案的探讨

1. 基于 的视频背景初探
smallniding 2014.10

2. 赏
http://getpushreel.com/
https://uk.believe.in/
http://eventsinedmonton.com/

3. <video>…..</video>
视频背景层
内容层
position:absolute;
z-index:1
position:absolute;
z-index:2
实现原理

4. <Before>

5. PC： HTML5 > Flash
Mobile: HTML5
PC：Flash
Mobile: HTML5
https://www.youtube.com/html5

6. 从⼀一个DEMO开始
<video src=“v.mp4” width=“850” height=“480” controls>
您的浏览器不⽀支持HTML5视频
</video>
DEMO

7. MAC Chrome 37

8. MAC Safari 7

9. Win 7 Safari 5.1.7

10. MAC Firefox 27

11. Win7 Firefox 31

12. MAC Opera 24

13. Win 7 IE 9

14. Win XP IE 6 7 8

15. mac chrome 37 mac safari 7
win7 firefox 31 win7 IE9
不⽀支持<video>
win7 safari 5.1.7
winxp IE678

16. Chrome Firefox Opera
Safari 3
Safari 4+
IE10 IE9 IE678
4 3 3.5 10.1 10.5 WIN MAC
video
VIDEO标签的⽀支持性
0.04% 0% 0% 0% 17%
绝⼤大部分的浏览器⽀支持html5的<video>

17. 那么现在问题来了

18. mac firefox 27
mac opera 24

19. 真相
只有⼀一个

20. 视频格式
AVI mov
rm/rmvb
mpg/mpeg/3gp
wmv
flv
mkv
ogg webm

21. 视频编解码标准专利视频格式
Moving Picture Experts Group
动态图像专家组

22. Chrome Firefox Opera Safari
IE10 IE9 IE678
4 20 33 34 9.6 3.1 3.2
mp4
mp4格式的⽀支持性
Firefox和Opera对mp4的⽀支持性不是很好

23. 开源视频格式
http://xiph.org/ogg/
视频编解码⽅方案
VP3

24. Chrome Firefox Opera Safari
IE10 IE9 IE678
4 3 3.5 10.1 10.5 3.2
ogg
ogg格式的⽀支持性
Safari和IE对ogg的完全不⽀支持

25. 开源视频格式
http://www.webmproject.org/

26. Chrome Firefox Opera Safari
IE10 9
5 6 25 3.6 4 28 10.5 10.6 16 3.2 8 7 6
webm
webm格式的⽀支持性
Safari和IE对webm完全不⽀支持

27. mp4
ogg
webm
综合来看
mp4 + ogg OR mp4 + webm

28. <video src=“v.mp4” width=“850” height=“480” controls>
您的浏览器不⽀支持HTML5视频
</video>
<video controls>
<source src='video.mp4' type='video/mp4;' >
<source src='video.webm' type='video/webm;'>
您的浏览器不⽀支持HTML5视频
</video>
DEMO

29. 那么现在问题⼜又来了

30. <VIDEO>⽀支持的属性
属性名说明
src 指定视频地址
poster 视频⽆无效时显⽰示的图
width height 指定video宽⾼高
controls 启⽤用播放控制栏
autoplay ⾃自动播放
loop 循环播放
preload 预加载
注意视频原始比例
出现即生效
auto none metadata

31. <video controls loop autoplay>
属性申明
<source src='video.mp4' type='video/mp4;' >
source列表
<source src='video.webm' type='video/webm;'>
您的浏览器不⽀支持HTML5视频
</video>
fallback回退方案

32. 那么现在问题再次来了

33. <video controls loop autoplay>
<source src='video.mp4' type='video/mp4;' >
<source src='video.webm' type='video/webm;'>
您的浏览器不⽀支持HTML5视频
</video>

34. <video id=“video”>
<source src='video.mp4' type='video/mp4;' >
<source src='video.webm' type='video/webm;'>
您的浏览器不⽀支持HTML5视频
</video>
var video = document.getElementById("video");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
HTML
JS
video对象的属性
video对象的⽅方法

35. VIDEO对象的属性
属性描述
autoplay 设置或返回是否⾃自动播放
controls 设置或返回是否显⽰示控件
loop 设置或返回是否循环播放
paused 设置或返回是否暂停
播放按钮
currentTime 设置或返回当前播放位快置（进以倒秒退
计）
ended 设置或返回播放是否已结束
muted 设置或返回是否静⾳音
volume 设置或返回⾳音量
关闭声音
调整音量

36. VIDEO对象的⽅方法
⽅方法描述
play() 开始播放
pause() 暂停播放
load() 重新加载视频
canPlayType() 检测是否能播放某⼀一视频类型

37. PAYPAL开源H5播放器

38. 腾讯视频 VS H5 VIDEO
优点缺点
腾讯视频
• PC端兼容性好
• 不⽤用担⼼心服务器压⼒力
• 不⽤用担⼼心视频⽂文件格式
与⼤大⼩小
• 依赖于Flash，易崩溃
• 限制接⼝口较多
• 部分有⼲⼴广告
• 需要考虑移动端
H5 video
• 不依赖于任何插件，浏
览器内置⽀支持
• ⽆无⼲⼴广告
• 接⼝口丰富
• 对移动⽀支持较好
• 低版本IE不⽀支持
• 需要准备不同⽂文件格
式
• 需要考虑服务器成本

39. <After>

40. 低版本IE的解决⽅方案
<video autoplay loop>
<source src='video.mp4' type='video/mp4;' >
<source src='video.webm' type='video/webm;'>
您的浏览器不⽀支持HTML5视频
</video>
<object><embed>………..</embed></object>
videojs.js mediaelement.js

41. 感谢您的聆听
未完待续...