H5 video 播放器demo代码
最近，要給“給我一只喵喵”做一個(gè)小視頻的項(xiàng)目，需要視頻播放功能。現(xiàn)在已經(jīng)主流的方式都是優(yōu)先先考慮使用h5播放器video,其他的方式都是GG,在這里我介紹用video實(shí)現(xiàn)視頻播放方法。
jQuery是繼prototype之後又一個(gè)優(yōu)秀的Javascrīpt框架，寫更少的代碼，做更多的事情，所以我們也可以考慮使用小小的插件來(lái)實(shí)現(xiàn)我們的功能。在這里給大家推薦一個(gè)jQuery插件庫(kù)-收集最全最新最好的jQuery插件，里面很多好玩的插件，可以用的時(shí)候搜一下。
愛(ài)奇藝／優(yōu)酷
一般來(lái)說(shuō)，最簡(jiǎn)單的可以借助于第三方服務(wù)，優(yōu)勢(shì)是使用視頻網(wǎng)站的服務(wù)器，可以輕松解決兼容問(wèn)題，而且斷點(diǎn)續(xù)傳，高清播放都輕松實(shí)現(xiàn)，能在任何平臺(tái)上使用。缺點(diǎn)是帶有廣告，不過(guò)可以購(gòu)買服務(wù)來(lái)避免廣告，除掉愛(ài)奇藝／優(yōu)酷的logo。整體性能無(wú)可挑剔。
H5 原生的界面 video
因?yàn)関ideo樣式是原生的界面看起來(lái)比較普通，但使用起來(lái)也很方便，手機(jī)端兼容情況很不錯(cuò)。網(wǎng)上的教程也比較多，我們下面的例子可以實(shí)現(xiàn)全屏的操作。
<!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>Video.js
video.js是一款開(kāi)源免費(fèi)的視頻播放器，兼容性特好，兼容web和wap端大多數(shù)瀏覽器，兼容ie6以上。Video.js 自動(dòng)檢測(cè)瀏覽器對(duì) HTML5 的支持情況，如果不支持 HTML5 則自動(dòng)使用 Flash 播放器。
demo：http://www.jq22.com/yanshi404
官網(wǎng)：http://www.videojs.com
github：https://github.com/videojs/video.js
Flowplayer.js
FlowPlayer 是一個(gè)Web上的視頻播放器，可以很容易將它集成在任何的網(wǎng)頁(yè)上。支持HTTP以及流媒體傳輸。flowplayer分html5版和flash版本，大家可根據(jù)需求選擇版本。Flowplayer支持播放flv、swf等流媒體以及圖片文件，能夠非常流暢的播放視頻文件，支持自定義配置和擴(kuò)展。
demo：http://www.jq22.com/yanshi6854
官網(wǎng)：https://flowplayer.org/latest
github：https://github.com/flowplayer/flowplayer
也許你會(huì)好奇到底怎么用，那么我就來(lái)示范一下。
首先從官網(wǎng)下載后的目錄結(jié)構(gòu)：
我們把需要打開(kāi)的視頻放到這個(gè)目錄結(jié)構(gòu)下以后，修改index.html中的代碼：
<!doctype html> <head><!-- player skin 播放器的皮膚 --><link rel="stylesheet" href="skin/functional.css"><!-- site specific styling 播放器的 樣式--><style>body { font: 12px "Myriad Pro", "Lucida Grande", sans-serif; text-align: center; padding-top: 5%; }.flowplayer { width: 80%; }</style><!-- for video tag based installs flowplayer depends on jQuery 1.7.2+ 這里是說(shuō)需要jquery1.7以上的版本--><script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script><!-- include flowplayer 播放器的jS核心代碼--><script src="flowplayer.min.js"></script></head> <body><!-- the player --><div class="flowplayer" data-swf="flowplayer.swf" data-ratio="0.4167"><video><!-- 講我們要播放的視頻路徑--><source type="video/mp4" src="123.mp4"></video></div></body>當(dāng)然 你也可以將這段代碼整合到自己的代碼當(dāng)中，記住核心是：
<script src="jquery-1.10.2.js"></script><script src="flowplayer.min.js"></script>更多干貨分享，請(qǐng)點(diǎn)關(guān)注大牛帶我飛吧，您的支持是我最大的動(dòng)力！
微信公眾號(hào)：大牛帶我飛吧
個(gè)人微信：panpan668706
個(gè)人博客: http://blog.csdn.net/m0_37639542
個(gè)人github: https://github.com/Hub-panpan
知乎專欄：https://zhuanlan.zhihu.com/Hub-panpan
總結(jié)
以上是生活随笔為你收集整理的H5 video 播放器demo代码的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： vue下载导出Excel案例
- 下一篇： AutoMapper 9.0的改造