H5 video 播放器demo代码
最近，要給“給我一只喵喵”做一個小視頻的項目，需要視頻播放功能?，F在已經主流的方式都是優先先考慮使用h5播放器video,其他的方式都是GG,在這里我介紹用video實現視頻播放方法。
jQuery是繼prototype之後又一個優秀的Javascrīpt框架，寫更少的代碼，做更多的事情，所以我們也可以考慮使用小小的插件來實現我們的功能。在這里給大家推薦一個jQuery插件庫-收集最全最新最好的jQuery插件，里面很多好玩的插件，可以用的時候搜一下。
愛奇藝／優酷
一般來說，最簡單的可以借助于第三方服務，優勢是使用視頻網站的服務器，可以輕松解決兼容問題，而且斷點續傳，高清播放都輕松實現，能在任何平臺上使用。缺點是帶有廣告，不過可以購買服務來避免廣告，除掉愛奇藝／優酷的logo。整體性能無可挑剔。
H5 原生的界面 video
因為video樣式是原生的界面看起來比較普通，但使用起來也很方便，手機端兼容情況很不錯。網上的教程也比較多，我們下面的例子可以實現全屏的操作。
<!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是一款開源免費的視頻播放器，兼容性特好，兼容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
也許你會好奇到底怎么用，那么我就來示范一下。
首先從官網下載后的目錄結構：
我們把需要打開的視頻放到這個目錄結構下以后，修改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+ 這里是說需要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>當然 你也可以將這段代碼整合到自己的代碼當中，記住核心是：
<script src="jquery-1.10.2.js"></script><script src="flowplayer.min.js"></script>更多干貨分享，請點關注大牛帶我飛吧，您的支持是我最大的動力！
微信公眾號：大牛帶我飛吧
個人微信：panpan668706
個人博客: http://blog.csdn.net/m0_37639542
個人github: https://github.com/Hub-panpan
知乎專欄：https://zhuanlan.zhihu.com/Hub-panpan
總結
以上是生活随笔為你收集整理的H5 video 播放器demo代码的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vue下载导出Excel案例
- 下一篇： AutoMapper 9.0的改造