上一篇文章我介绍到HTML5视频播放器VideoJS的使用方法,下面我来介绍使用VideoJS搭建视频博客方法。开始测试,由于VideoJS不支持FLV格式视频,必须空间里上传一个MP4视频文件,空间必须支持流媒体文件播放。首先,先插入一段css和js文件到<head>网页头部,为了不影响其它页面加载速度,css和js文件可以直接插入在当前视频页</body>前。(附:下面视频演示)
(VideoJS视频截图)
一、代码如下:
<link href="http://vjs.zencdn.net/4.6/video-js.css"rel="stylesheet">
<script src="http://lovejiani.com/videojs/video.js"></script>
二、再插入下面的播放器代码,放到需要播放的位置。其中my_video.mp4修改为自己的视频地址,外链视频需要绝对地址,比如,http://xxx.com/视频名.mp4
<video id="my_video_1" controls
preload="auto" width="640" height="480" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
</video>
演示视频:(可以播放,不是优酷视频哦)
在没接触VideoJS之前,找了N个方法在博客插入属于自己的视频,包括第三方视频托管,可惜要收费。总的来说VideoJS是比较满意。好了,开始欣赏音乐吧,一个属于自己的视频网站就这样建立了。
抱歉:文件已失效