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小时内删除。