在这个有关视频的快速技巧里,我们将探讨如何在项目中使用 HTML5 video 标签。由于旧的浏览器和 Internet Explorer 不支持 <video> 元素,我们必须为这些浏览器找到一个支持 Flash 文件的解决方案。
不幸的是,和 HTML5 音频一样,涉及到视频的文件格式,Firefox 和 Safari/Chrome 的支持方式并不相同。因此,如果你想在这个时候使用 HTML5 视频,则需要创建三个视频版本。
.OGG
Firefox 能良好支持这种格式。你可以使用 VLC (媒体 -> 串流/保存) 实现视频的轻松转换。
.MP4
许多屏幕录制工具支持 MP4 格式的自动导出,你可以使用它们为 Safari 和 Chrome 浏览器生成指定格式的视频。
.FLV/.SWF
并非所有浏览器都支持 HTML5 视频,当然,考虑到兼容性,请确保添加一个退而求其次的 Flash 版本。
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>untitled</title>
</head>
<body>
<video controls width="500">
<!-- if Firefox -->
<source src="video.ogg" type="video/ogg" />
<!-- if Safari/Chrome-->
<source src="video.mp4" type="video/mp4" />
<!-- If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.) -->
<embed src="http://blip.tv/play/gcMVgcmBAgA%2Em4v" type="application/x-shockwave-flash" width="1024" height="798" allowscriptaccess="always" allowfullscreen="true"></embed>
</video>
</body>
</html>
一些 <video> 元素的可选参数:
controls: 布尔值,显示 play/stop 按钮;
poster: 在视频播放之前所显示的图片的 URL;
autoplay: 布尔值,页面加载完成后自动播放视频;
width: 视频所需的宽度。默认情况下,浏览器会自动检测所提供的视频尺寸;
height: 视频所需高度;
src: 视频文件的路径,使用子元素 <source> 实现更好。
HTML5 视频的注意事项
1、需创建三种视频格式以实现对 Firefox,Safari/Chrome 和 IE 的支持;
2、不要省略任何一种格式。不能将 HTML5 如你所想的那样兼容 Firefox 和 Safari,Safari 能解释 <video> 标签,会期望加载合适的文件,如果省略某种格式,会导致播放器空白;
3、记住全屏显示不被 Safari 和 Chrome 所支持。然而,在 Firefox 3.6 版本中,你可以全屏浏览。
4、要明白 IE 加载 Flash 文件的原因,是因为 IE 不能解释 <video> 元素。然而,如果浏览器支持,则会期望加载合适的文件。
分享到:
相关推荐
浏览器(Chrom+Firefox)
这个插件功能是键盘浏览网页,感觉vimperator太高深,命令太多不好记,还是觉得这个好用。
自用的chrom插件安装包,解压,打开chrom浏览器,打开开发者模式,加载已解压安装包即可
chrom zh cn adm 简体中文 chrom zh tw adm 繁体中文 chrom en us adm 美国英文 chrom adm chrom adm
chrom58+chromedriver
ChromeStandalone_54.0.2840.59_Setup,chrom的离线安装包,官方原版
jsonview for chrome,firefox,可将见面返回的json直接格式化后直观展示,安装方式:打开chrom扩展工具,选择开发者模式,将crx文件拖动到页面按提示操作安装
原生javascript自定义滚动条(兼容IE,火狐,chrom)
chrom - react调试插件
支持flash版本chrom.zip
VueDevTools-5.3.3,Chrom浏览器Vue调试插件目前最新版本,可再开发这工具中进行vue的前端代码调试工作 Chrome and Firefox DevTools extension for debugging Vue.js applications.
chrom 25开发版 centos 6 rpm安装包很难找的自带flashplayer
Chrom扩展及应用高清PDF,含源码
chrom调试工具汉化,只能适应特定版本的chrome!!
HTML5的server端代码,很好地展示了HTML5的websocket机制和canvas性能;支持linux和windows。
chrom浏览器 迅雷插件及使用方法
https://blog.csdn.net/k3108001263/article/details/89604857 打开Stack Overflow登录页面https://stackoverflow.com/users/login登录不上,显示Stack Overflow ... 原因是某些链接被墙了 解决方案 下载并解压 ...
chrom extentions
一款适用于chrom浏览器的elasticsearch-head插件,简单安装,容易上手。
Chrome插件开发必备好书,分享给大家,开源的,可以网上下载到