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超时时间
- 下一篇: 硬件编程:硬件开发中常用的几种通信接口总