HTML5视频标签使用时注意事项

 

视频标签的出现无疑是HTML 5的一大亮点,接下来我们将探讨如何在项目中使用HTML 5视频标签,由于旧的浏览器和Internet Explorer不支持<video>元素,我们必须为这些浏览器找到一个支持Flash文件的解决方案。

不幸的是,和HTML 5音频一样,涉及到视频的文件格式,Firefox Safari/Chrome 的支持方式并不相同。因此,如果你想在这个时候使用HTML 5视频,则需要创建三个视频版本。

OGG

Firefox 能良好支持这种格式。你可以使用 VLC (媒体 -> 串流/保存) 实现视频的轻松转换。

MP4

许多屏幕录制工具支持 MP4 格式的自动导出,你可以使用它们为 Safari Chrome 浏览器生成指定格式的视频。

FLV/SWF

并非所有浏览器都支持HTML 5视频标签,当然,考虑到兼容性,请确保添加一个退而求其次的 Flash 版本。

 

  

一些HTML 5视频标签元素的可选参数:

◆controls: 布尔值,显示 play/stop 按钮;

◆poster: 在视频播放之前所显示的图片的 URL

◆autoplay: 布尔值,页面加载完成后自动播放视频;

◆width: 视频所需的宽度。默认情况下,浏览器会自动检测所提供的视频尺寸;

◆height: 视频所需高度;

◆src: 视频文件的路径,使用子元素 <source> 实现更好。

HTML5 视频标签的注意事项

1、需创建三种视频格式以实现对 FirefoxSafari/Chrome IE 的支持;

2、不要省略任何一种格式。不能将HTML 5如你所想的那样兼容 Firefox SafariSafari 能解释 <video> 标签,会期望加载合适的文件,如果省略某种格式,会导致播放器空白;

3、记住全屏显示不被 Safari Chrome 所支持。然而,在 Firefox 3.6 版本中,你可以全屏浏览;

4、要明白 IE 加载 Flash 文件的原因,是因为 IE 不能解释 <video> 元素。然而,如果浏览器支持,则会期望加载合适的文件。

 

参与评论 您还未登录,请先 登录 后发表或查看评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

qqfreshman

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值