1. 首页
  2. 网络技术
  3. 使用VideoJS给博客添加视频方法

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

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

image 使用VideoJS给博客添加视频方法 网络技术

(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  评论于  

    空间慢,视频缓冲就慢,换个快点的空间。

  • 数术会  评论于  

    我网站用了,但是很卡,怎么办

  • 进销存软件  评论于  

    非常不错的文章,过来看看学习,希望博主分享更多好的文章。
    【轻松掌柜软件】-关注中小企业及管理软件应用

  • 珠海影视制作  评论于  

    这个还真没用过哈

  • gank开黑吧  评论于  

    gank 开黑吧

  • 偏方大全  评论于  

    谷歌播放无压力。

  • 上海策划公司  评论于  

    调用的视频,有时候会被删除。

  • 他她服装搭配网  评论于  

    方法简单实用,用得着的朋友有福了,可惜我的搭配网用不上这个功能。

  • php程序员  评论于  

    我都是直接调用优酷的视频。。

  • 歌词找歌名  评论于  

    脱离flash是好事。

  • 导热硅脂  评论于  

    谢谢博主不断跟我们分享好东西,代码先记着,说不定哪时可以用上。

  • 香港云主机  评论于  

    博主写得很好,幸苦了,以后会常来的。
    对了,我刚刚发现恒创科技9月2日 中午14:00可以抢任意半价主机,优惠码是2014year5