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

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

😂 这篇文章最后更新于2524天前,您需要注意相关的内容是否还可用。

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

抱歉:文件已失效