重构前端知识体系之HTML
上节内容我们讲述了HTML5的音频播放，与音频播放类似，在网页上播放视频之前，需要借助flash。但随着HTML5的到来，这一需求得以改变，因为HTML5自身便可以通过video标签来支持视频播放。
在HTML中播放视频并不简单，尤其是要实现良好的兼容性更是如此。
使用embed方式
embed标签用于定义一个外部容器，用于装载MP4等视频文件。
例如：
缺陷：
使用object方式
object标签同样可以定义一个外部容器，用于装载MP4等视频文件。
例如：
缺陷：
使用video方式
video标签是HTML5专门为视频播放设计的标签，推荐使用。
效果：
缺陷：
最好的解决方案
上述介绍了三种使用视频的方式，可以将它们结合起来使用。
示例：
讲解：
观察以下示例，可以看到使用了4种不同的视频格式，这样做的好处是video元素会尝试播放mp4、ogg或webm格式中的任何一种来播放视频。如果所有尝试都失败，则会回退到embed元素。
效果：
显示效果与video元素一致！
视频格式
video元素支持三种视频格式：MP4, WebM, 和 Ogg。
video标签的属性
这里列出了一些常用的video属性，更多请参考w3school。
video的事件
事件是我们与视频交互的重要工具。
这里仅列出部分事件，更多请参考w3school。
一个视频播放器的案例
说了这么多，终于迎来了案例环节！
码上！
效果：
总结：
视频播放的案例也必不可少。
重构前端知识体系，你愿意加入吗？
博客说明与致谢
本文所涉及的资料来源于互联网整理，其中包含个人的总结和观点，分享的目的是为了共建社区和巩固知识。若引用的资料存在侵权问题，请联系本人删除。感谢万能的网络，W3C，菜鸟教程等！感谢辛勤的自己，个人博客，GitHub学习，GitHub公众号【归子莫】，小程序【子莫说】。如果你觉得这篇文章对你有所帮助，不妨点赞鼓励一下，好文记得收藏哦！关注我一起成长！所属专栏：重构前端知识体系（HTML）。幸好我在，感谢你来！
多重随机标签