发表于:   1566

    相信有经常访问隽永东方知识库的童鞋们肯定会发现我们官网采用了本地化视频播放器来播放七牛云端视频，尽管播放的时候左下角有一个小小的flowplayer的LOGO，不过基本不影响观看，而且这个播放器支持各种移动端设备查看，这点very good，那么今天我们就给各位小伙伴们分享一下这个高大上的本地视频播放系统搭建方案。

    首先需要准备的软件和工具有：

    一，Monosnap在线视频录制软件

    windows版：

    Mac版：

    二，flowplayer本地化播放器：

    [download id=”10581″]

    三，七牛云端存储账号

    准备好了以上三者以后，就可以进行搭建了，首先，我们简单演示一下如何使用Monosnap来录制高清带声音的MP4视频教程：

    先拉好录制的范围选框
    然后设置好音频输入设备，确保能够录制到声音。

    接着在网站的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 -->

    以上嵌入代码是假设您在WordPress模板目录新建了一个文件夹叫做player，同时把flowplayer所需的所有文件都存储到了这个文件夹。

    然后在所需嵌入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视频上传到七牛云存储以后获得的带https的视频云端访问地址。

    通过以上代码嵌入以后，前台呈现的就是一个高清播放兼容各种移动设备的本地视频播放系统了，是不是很酷？^_^

    相关文章