原生video标签播放视频时踩过的坑

谷歌浏览器支持MP4

在页面中插入一段视频，我们首先想到的是video标签，只要指定src属性设置为视频的地址就完事了。但是真正用的时候，很多兼容性问题就暴露出来了。例如，谷歌浏览器支持MP4格式的视频，但不支持WebM格式的视频。如果你想在谷歌浏览器中播放WebM格式的视频，就需要使用视频转换器将视频转换为MP4格式。

火狐浏览器支持WebM

与谷歌浏览器相反，火狐浏览器支持WebM格式的视频，但不支持MP4格式的视频。如果你想在火狐浏览器中播放MP4格式的视频，就需要使用视频转换器将视频转换为WebM格式。

IE浏览器支持H.264

IE浏览器支持H.264编码格式的视频，但不支持VP8编码格式的视频。如果你想在IE浏览器中播放VP8格式的视频，就需要使用视频转换器将视频转换为H.264格式。

Safari浏览器支持H.264和VP8

Safari浏览器支持H.264和VP8两种编码格式的视频。因此，你可以在Safari浏览器中播放任何格式的视频。

跨域问题

如果你想在页面中播放一个位于另一个域名的视频，就会遇到跨域问题。要解决跨域问题，你可以使用CORS（跨域资源共享）技术。CORS允许浏览器向另一个域名的服务器发送请求，并接收服务器的响应。

编码格式问题

视频的编码格式有很多种，包括MP4、WebM、H.264、VP8等。不同的浏览器支持不同的编码格式。如果你想在页面中播放一段视频，就需要选择一种浏览器支持的编码格式。

视频尺寸问题

视频的尺寸也有很多种，包括16:9、4:3、1:1等。如果你想在页面中播放一段视频，就需要选择一种合适的视频尺寸。视频尺寸太大会导致视频加载缓慢，视频尺寸太小会导致视频画面模糊。

自动播放问题

有些视频会自动播放，有些视频不会自动播放。如果你想在页面中播放一段视频，就需要决定是否让视频自动播放。如果视频自动播放，可能会吓到用户。如果视频不自动播放，用户可能不会注意到视频。

全屏播放问题

有些视频可以全屏播放，有些视频不能全屏播放。如果你想在页面中播放一段视频，就需要决定是否让视频全屏播放。如果视频可以全屏播放，用户可以获得更佳的观看体验。如果视频不能全屏播放，用户只能在较小的窗口中观看视频。

错误处理

在播放视频时，可能会遇到各种各样的错误。例如，视频可能加载失败，视频可能播放失败，视频可能卡顿等。如果你想在页面中播放一段视频，就需要考虑如何处理这些错误。你可以使用JavaScript的try-catch语句来捕获错误，并对错误进行处理。

总结

在本文中，我们讨论了在使用原生video标签播放视频时可能会遇到的各种问题。我们还讨论了如何解决这些问题。希望本文能帮助大家避免在使用video标签时踩坑。