相信有經(jīng)常訪問雋永東方知識(shí)庫(kù)的童鞋們肯定會(huì)發(fā)現(xiàn)我們官網(wǎng)采用了本地化視頻播放器來(lái)播放七牛云端視頻，盡管播放的時(shí)候左下角有一個(gè)小小的flowplayer的LOGO，不過基本不影響觀看，而且這個(gè)播放器支持各種移動(dòng)端設(shè)備查看，這點(diǎn)very good，那么今天我們就給各位小伙伴們分享一下這個(gè)高大上的本地視頻播放系統(tǒng)搭建方案。
首先需要準(zhǔn)備的軟件和工具有：
一，Monosnap在線視頻錄制軟件
windows版：
Mac版：
二，flowplayer本地化播放器：
[download id=”10581″]
三，七牛云端存儲(chǔ)賬號(hào)
準(zhǔn)備好了以上三者以后，就可以進(jìn)行搭建了，首先，我們簡(jiǎn)單演示一下如何使用Monosnap來(lái)錄制高清帶聲音的MP4視頻教程：
接著在網(wǎng)站的header里邊插入flowplayer必須的JS文件：
<!-- Flowplayer include files start -->
<link rel="stylesheet" href="<?php bloginfo('template_url')?>/player/skin/minimalist.css" type="text/css" media="screen" />
<script src="<?php bloginfo('template_url')?>/player/jquery-1.11.0.min.js"></script>
<script src="<?php bloginfo('template_url')?>/player/flowplayer.min.js"></script>
<!-- Flowplayer include files end -->
以上嵌入代碼是假設(shè)您在WordPress模板目錄新建了一個(gè)文件夾叫做player，同時(shí)把flowplayer所需的所有文件都存儲(chǔ)到了這個(gè)文件夾。
然后在所需嵌入flowplayer播放器的地方插入如下代碼即可：
<div class=”flowplayer” data-swf=”/wp-content/themes/eastdesign/player/flowplayer.swf” data-ratio=”0.4167″><video width=“100%” height=“300″><source type=”video/mp4″ src=”https://o0modpcbv.qnssl.com/video-Moz%E7%BD%91%E7%AB%99%E7%9A%84Open-Site-Explorer%E5%B7%A5%E5%85%B7%E7%9A%84%E4%BD%BF%E7%94%A8-2016-03-24.mp4” /></video></div>
以上代碼其中?https://o0modpcbv.qnssl.com/video-Moz%E7%BD%91%E7%AB%99%E7%9A%84Open-Site-Explorer%E5%B7%A5%E5%85%B7%E7%9A%84%E4%BD%BF%E7%94%A8-2016-03-24.mp4 就是我們通過Monosnap錄制的mp4視頻上傳到七牛云存儲(chǔ)以后獲得的帶https的視頻云端訪問地址。
通過以上代碼嵌入以后，前臺(tái)呈現(xiàn)的就是一個(gè)高清播放兼容各種移動(dòng)設(shè)備的本地視頻播放系統(tǒng)了，是不是很酷？^_^