我们可以先来看一下使用 flowplayer 播放器播放视频的最快速的方法。先打开我们事先准备好的一个 html5 文档 …
注意，文档的声明一定要使用 html5。因为 flowplayer 会用到 html5 里的一些标签。
然后我们要在这个网页上嵌入 flowplayer 用到的一些资源 …
在网页的 <head> 标签上 … 先要嵌入 jQuery …
<!-- jQuery 库 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"> </script>
然后是 flowplayer …
<!-- flowplayer -->
<script type="text/javascript" src="//releases.flowplayer.org/5.4.3/flowplayer.min.js"> </script>
最后我们需要再嵌入一个 flowplayer 的皮肤 … 也就是播放器的外观 …
<!-- 皮肤 -->
<link rel="stylesheet" type="text/css" href="//releases.flowplayer.org/5.4.3/skin/minimalist.css">
上面这些文件都存储在了云上，用户访问这个网页的时候，浏览器会在云服务器上直接下载这些文件 …. 可以节省我们一点资源 …
下面在网页的 <body> 标签里，去添加点简单的 HTML 代码来使用播放器去播放视频 …
<div class="flowplayer">
<video>
<source type="video/mp4" src="http://mydomain.com/path/to/intro.mp4">
</video>
</div>
首先我们要创建一个播放器的容器 .. 可以使用 <div> 标签 …
在这个容器上要添加一个 flowplayer 类 …
在它的里面，我们可以使用 HTML5 的 <video> 标签 ..
在这个 <video> 标签里 … 去指定播放器要播放的视频的来源 … 这里我们要用到的是 <source> 标签 ..
加上一个 type 属性 … 要播放的视频是 mp4 格式的 … 所以 type 的值可以设置成 video/mp4 …
然后再使用 src 属性来指定视频的位置 …
在 video 目录下有一个视频 … 输入 video … 斜线 … 再加上视频的名称 … video/video/croods-tlr3_h720p.mov
保存 … 到浏览器上去预览一下 …
网页上已经显示 flowplayer 播放器了 … flowplayer 首先会用 HTML5 模式的播放器 … 如果浏览器不支持 HTML5 … 会退回成 flash 模式的播放器 ..
播放器的宽度默认是 100% ，高度会根据一个 ratio 比例值自动去设置 …
另外播放器会使用视频里的第一帧作为视频的封面 …
点击 播放按钮 … 可以播放视频 ...
