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 ⽂件：
实例
问题
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最终实现的效果如下：
html代码转链接
如何使⽤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：播放视频时⾃动隐藏控制条。
使⽤⽅式：
如果是后期动态添加的video元素，也可以通过hivideo动态加载。例如页⾯动态添加了⼀个id为”player”的video元素，可通过如下⽅式把video转换为hivideo播放器：
ElementById("player"));
如何隐藏浏览器的播放器样式
⽬前⼤多数浏览器都⽀持video元素，并且不同浏览器实现的video样式也不尽相同。
chrome实现的播放器样式：
Firefox实现的播放器样式：
IE实现的播放器样式：
为了让播放器在各个浏览器下样式统⼀，⾸先要隐藏各个浏览器实现的样式。但⼀般我们通过浏览器开发⼯具查看不到播放器下的元素，因为这些元素都是阴影元素，它们是通过⽂档⽚段附加到video上，对于⽂档流是不可见的。
如何查看浏览器下的阴影元素？Chrome为开发⼈员提供了可选项，打开开发者⼯具->Settings->General页签，我们能看到Elments有⼀个叫做”Show user agent shadow DOM”的选项：
勾选上该选项，现在我们通过开发⼯具可以查看到video下的播放元素：
上图中
元素就是控制条的容器，我们只要设置它的display为none就可以隐藏掉控制条，但也需要兼容各个浏览器：
video[ishivideo="true"]::-webkit-media-controls{display:none !important;
}video[ishivideo="true"]::-moz-media-controls{display:none !important;
}video[ishivideo="true"]::-o-media-controls{display:none !important;
}video[ishivideo="true"]::media-controls{display:none !important;
}
这⾥我遇到⼀个费解的问题，把上⾯的样式通过合并的⽅式写是⽆效的，下⾯的写法不能隐藏掉阴影元素：
video[ishivideo="true"]::-webkit-media-controls,
video[ishivideo="true"]::-moz-media-controls,
video[ishivideo="true"]::-o-media-controls,
video[ishivideo="true"]::media-controls{display:none !important;
}
隐藏浏览器阴影元素后就可以开始动⼿实现⾃⼰的控制条了。实现之前，我们得了解video提供的API。
播放器常⽤API
各个浏览器操作播放器提供的API名称⼀般都带有⼚商前缀，所有基本上每⼀个API函数都对应多个版本，需要考虑兼容性。
1.全屏事件
["fullscreenchange", "webkitfullscreenchange", "mozfullscreenchange", "MSFullscreenChange"].forEach(function(eventType){
document.addEventListener(eventType,function(event){
})
});
如果播放器全屏状态放⽣变化上⾯的事件就会触发。上⾯的事件我们只知道全屏状态发⽣变化，但不知道当前是进⼊全屏还是退出全屏。还需要结合全屏状态API。
2.当前是否全屏状态
hivideo.prototype.isFullScreen = function(){return document.fullscreenElement
||document.webkitFullscreenElement||FullScreenElement||document.msFullscreenElement;
};
上⾯是hivideo封装的判断是否全屏的函数。
3.进⼊全屏模式
questFullscreen) {
}else if(video.webkitRequestFullscreen) {
video.webkitRequestFullscreen();
}else RequestFullScreen) {
}else if(video.msRequestFullscreen) {
video.msRequestFullscreen();
}
4.退出全屏模式
itFullscreen) {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。