×

网站建设

使用VideoJS给博客添加视频方法

小虎 小虎 发表于2014-08-31 02:33:11 浏览4068 评论12

12人参与发表评论

上一篇文章我介绍到HTML5视频播放器VideoJS的使用方法,下面我来介绍使用VideoJS搭建视频博客方法。开始测试,由于VideoJS不支持FLV格式视频,必须空间里上传一个MP4视频文件,空间必须支持流媒体文件播放。首先,先插入一段css和js文件到<head>网页头部,为了不影响其它页面加载速度,css和js文件可以直接插入在当前视频页</body>前。(附:下面视频演示)

image

(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是比较满意。好了,开始欣赏音乐吧,一个属于自己的视频网站就这样建立了。

抱歉:文件已失效

评论列表

访客
admin admin2015-04-21 22:51:00 · 回复 空间慢,视频缓冲就慢,换个快点的空间。
数术会 数术会2015-04-20 16:39:57 · 回复 我网站用了,但是很卡,怎么办
进销存软件 进销存软件2014-09-11 17:22:05 · 回复 非常不错的文章,过来看看学习,希望博主分享更多好的文章。
【轻松掌柜软件】-关注中小企业及管理软件应用
珠海影视制作 珠海影视制作2014-09-10 22:39:56 · 回复 这个还真没用过哈
gank开黑吧 gank开黑吧2014-09-10 22:29:39 · 回复 gank 开黑吧
偏方大全 偏方大全2014-09-08 03:34:38 · 回复 谷歌播放无压力。
上海策划公司 上海策划公司2014-09-07 15:39:23 · 回复 调用的视频,有时候会被删除。
他她服装搭配网 他她服装搭配网2014-09-06 22:58:17 · 回复 方法简单实用,用得着的朋友有福了,可惜我的搭配网用不上这个功能。
php程序员 php程序员2014-09-06 16:44:10 · 回复 我都是直接调用优酷的视频。。
歌词找歌名 歌词找歌名2014-09-04 07:54:52 · 回复 脱离flash是好事。
导热硅脂 导热硅脂2014-09-03 14:35:41 · 回复 谢谢博主不断跟我们分享好东西,代码先记着,说不定哪时可以用上。
香港云主机 香港云主机2014-09-02 09:41:21 · 回复 博主写得很好,幸苦了,以后会常来的。
对了,我刚刚发现恒创科技9月2日 中午14:00可以抢任意半价主机,优惠码是2014year5