隽永东方设计工作室
Eastern Design Studio Menu

使用flowplayer播放器结合Monosnap视频录制和七牛云端存储打造本地高清视频展示

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

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

一,Monosnap在线视频录制软件

windows版:

Mac版:

二,flowplayer本地化播放器:

flowplayer.zip (下载1)

三,七牛云端存储账号

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

先拉好录制的范围选框

先拉好录制的范围选框

然后设置好音频输入设备,确保能够录制到声音。

然后设置好音频输入设备,确保能够录制到声音。

接着在网站的header里边插入flowplayer必须的JS文件:

以上嵌入代码是假设您在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的视频云端访问地址。

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

       

头像 隽永东方创始人 & CEO
生于福建长汀,学于海滨大连,创业于国际都市上海,隽永东方设计工作室创始人兼CEO,喜欢音乐、运动、旅游,热心公益事业,在网站设计开发和运营数据中心等领域皆有多年从业经验,独特的国际视角,以客户为中心,视客户需求为核心价值观……

Call Me   Email Us   Weibo       Google+   LinkedIn

作者:


  售前在线询价单
  全网营销套餐
  隽永东方学院