基于贬5的视频背景初探
- 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=/slideshow/h5-40145195/40145195/“v.mp4” width=“850” height=“480” controls> 您的浏览器不?支持HTML5视频 </video> DEMO
- 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的?支持性不是很好
- 24. Chrome Firefox Opera Safari IE10 IE9 IE678 4 3 3.5 10.1 10.5 3.2 ogg ogg格式的?支持性 Safari和IE对ogg的完全不?支持
- 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=/slideshow/h5-40145195/40145195/“v.mp4” width=“850” height=“480” controls> 您的浏览器不?支持HTML5视频 </video> <video controls> <source src=/slideshow/h5-40145195/40145195/& 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=/slideshow/h5-40145195/40145195/& type='video/mp4;' > source列表 <source src='video.webm' type='video/webm;'> 您的浏览器不?支持HTML5视频 </video> fallback回退方案
- 32. 那么现在问题再次来了
- 33. <video controls loop autoplay> <source src=/slideshow/h5-40145195/40145195/& type='video/mp4;' > <source src='video.webm' type='video/webm;'> 您的浏览器不?支持HTML5视频 </video>
- 34. <video id=“video”> <source src=/slideshow/h5-40145195/40145195/& 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. 笔础驰笔础尝开源贬5播放器
- 38. 腾讯视频 VS H5 VIDEO 优点缺点 腾讯视频 ? PC端兼容性好 ? 不?用担?心服务器压?力 ? 不?用担?心视频?文件格式 与?大?小 ? 依赖于Flash，易崩溃 ? 限制接?口较多 ? 部分有??广告 ? 需要考虑移动端 H5 video ? 不依赖于任何插件，浏 览器内置?支持 ? ?无??广告 ? 接?口丰富 ? 对移动?支持较好 ? 低版本IE不?支持 ? 需要准备不同?文件格 式 ? 需要考虑服务器成本
- 39. <After>
- 40. 低版本IE的解决?方案 <video autoplay loop> <source src=/slideshow/h5-40145195/40145195/& type='video/mp4;' > <source src='video.webm' type='video/webm;'> 您的浏览器不?支持HTML5视频 </video> <object><embed>………..</embed></object> videojs.js mediaelement.js
- 41. 感谢您的聆听 未完待续...