php实例视频播放代码,[h5]一个基于HTML5实现的视频播放器代码详解

最好的 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 文件：

实例

Play a video file

问题

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：播放视频时自动隐藏控制条。

使用方式ÿ