最好的 HTML 解决方法
HTML 5 + +
上例中使用了 4 中不同的视频格式。HTML 5 元素会尝试播放以 mp4、ogg 或 webm 格式中的一种来播放视频。如果均失败,则回退到 元素。
问题
您必须把视频转换为很多不同的格式
元素无法通过 HTML 4 和 XHTML 验证。
元素无法通过 HTML 4 和 XHTML 验证。
注释:使用 (HTML5) 解决验证问题。
优酷解决方案
在 HTML 中显示视频的最简单的方法是使用优酷等视频网站。
如果您希望在网页中播放视频,那么您可以把视频上传到优酷等视频网站,然后在您的网页中插入 HTML 代码即可播放视频:
width="480" height="400"
type="application/x-shockwave-flash">
使用超链接
如果网页包含指向媒体文件的超链接,大多数浏览器会使用“辅助应用程序”来播放文件。
以下代码片段显示指向 AVI 文件的链接。如果用户点击该链接,浏览器会启动“辅助应用程序”,比如 Windows Media Player 来播放这个 AVI 文件:
实例
问题
HTML4 无法识别 标签。您的页面无法通过验证。
如果浏览器不支持 Flash,那么视频将无法播放
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。
使用 标签
标签的作用是在 HTML 页面中嵌入多媒体元素。
下面的 HTML 片段显示嵌入网页的一段 Flash 视频:
实例
问题
如果浏览器不支持 Flash,将无法播放视频。
iPad 和 iPhone 不能显示 Flash 视频。
如果您将视频转换为其他格式,那么它仍然不能在所有浏览器中播放。
使用 标签
是 HTML 5 中的新标签。
标签的作用是在 HTML 页面中嵌入视频元素。
以下 HTML 片段会显示一段嵌入网页的 ogg、mp4 或 webm 格式的视频:
实例
Your browser does not support the video tag.
问题
您必须把视频转换为很多不同的格式。
元素在老式浏览器中无效。
元素无法通过 HTML 4 和 XHTML 验证。
什么是hivideo?
最近一段时间在使用PhoneGap开发一个App应用,App需要播放视频,本想直接使用html5的video,但使用它在全屏播放时不支持横屏播放,只能放弃。最终决定还是自己封装一个播放器算了,免得以后要扩展功能麻烦。
最近迷上hi这个单词,所以我给这个播放器取名叫做:hivideo。
hivideo是一款基于html5的视频播放器,摒弃video原有的播放控制条样式,自己重写了一次。支持暂停、播放进度控制、声音控制、全屏播放。如果是要在手机端使用hivideo,全屏播放时还支持横屏播放。
hivideo最终实现的效果如下:
如何使用hivideo?
hivideo目录结构:
assets
----images
----hivideo.css
hivideo.js
要想使用hivideo,首先得在主界面引入样式hivideo.css文件。
hivideo.js文件可在主页面直接引用,同时也支持CommonJs、AMD规范。
在需要转换为hivideo播放器的video标签上添加属性:
hivideo会自动把上面的video元素转换为hivideo播放器。我们还可以在video标签上设置播放属性:
1.autoplay: 自动播放。
2.isrotate:全屏是否横屏播放,如果在手机端使用hivideo,我们可以设置该属性为true,表示全屏播放时横屏显示。
3.autoHide:播放视频时自动隐藏控制条。
使用方式&#