H5 video 播放器demo
H5 video 播放器demo
前言
最近在做一個wap端的項目，需要視頻播放功能。大家也知道wap對flash支持很差，所以優先考慮使用h5播放器video,在這里我介紹用video實現視頻播放方法。之后在介紹幾個插件和第三方視頻實現方法。
H5 video
因為video樣式是原生的界面看起來比較普通，但使用起來沒什么問題，手機端兼容情況很不錯。網上的教程也比較多。我這里提供了一個demo給大家學習。
demo代碼：
<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><body><video id="video" src="http://vjs.zencdn.net/v/oceans.mp4" controls="controls" autoplay height="100%" width="100%">您的瀏覽器不支持。</video><button type="button" style="text-align: center;" onclick="launchFullScreen(document.getElementById('video'))">全屏</button></body><script type="text/javascript">//全屏幕播放function launchFullScreen(element) {if(element.requestFullScreen) {element.requestFullScreen();} else if(element.mozRequestFullScreen) {element.mozRequestFullScreen();} else if(element.webkitRequestFullScreen) {element.webkitRequestFullScreen();}}</script> </html>支持格式：
| MP4 | video/mp4 |
| WebM | video/webm |
| Ogg | video/ogg |
瀏覽器兼容性：
Video.js
video.js是一款開源免費的視頻播放器，兼容性特好，兼容web和wap端大多數瀏覽器，兼容ie6以上。Video.js 自動檢測瀏覽器對 HTML5 的支持情況，如果不支持 HTML5 則自動使用 Flash 播放器。
demo：http://www.jq22.com/yanshi404
官網：http://www.videojs.com
github：https://github.com/videojs/video.js
Flowplayer.js
FlowPlayer 是一個Web上的視頻播放器，可以很容易將它集成在任何的網頁上。支持HTTP以及流媒體傳輸。flowplayer分html5版和flash版本，大家可根據需求選擇版本。Flowplayer支持播放flv、swf等流媒體以及圖片文件，能夠非常流暢的播放視頻文件，支持自定義配置和擴展。
demo：http://www.jq22.com/yanshi6854
官網：https://flowplayer.org/latest
github：https://github.com/flowplayer/flowplayer
愛奇藝／優酷
第三方服務，優勢是使用視頻網站的服務器，可以輕松解決兼容問題，而且斷點續傳，高清播放都輕松實現，能在任何平臺上使用。缺點是帶有廣告，不過可以購買服務來避免廣告，除掉愛奇藝／優酷的logo。整體性能無可挑剔。
附：
http://blog.liuxianan.com/html5-video-resize.html 使用transform來適配視頻
總結
以上是生活随笔為你收集整理的H5 video 播放器demo的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： rabbitmq中默认unack超时时间
- 下一篇： 硬件编程：硬件开发中常用的几种通信接口总