电脑技巧收藏家
当前位置:首页>>dreamweaver技巧>>正文

VideoJS 最流行的 HTML5 网页视频播放器

 

VideoJS 是最流行的 HTML5 网页视频播放器,免费、开源,可使用 CSS 轻松定制皮肤,支持全屏,在不支持的浏览器自动切换为 Flash 播放。

video.js是一个JavaScript和CSS库,使得它更容易使用和建立HTML5视频,今天。这也被称为“HTML5视频播放器”。video.js提供了一个通用控件内置的HTML / CSS的皮肤,修复跨浏览器的不一致,增加了附加功能,如全屏和字幕,管理退回到Flash或其他播放技术,不支持HTML5视频时,也提供了一个一致与视频交互的JavaScript API。

皮肤一次,到处使用
与其他网络播放器,创建一个自定义皮肤,需要复杂蒙皮语言,或者是不是一种选择,在所有。video.js的HTML5,Flash和任何其他的播放技术使用相同的CSS代码,打开门,使用标记,我们已经很熟悉的定制。

一致的播放API
HTML5的,Flash和其他播放技术都有不同的JavaScript API与视频交互。video.js提供了一个单一的API,可用于跨平台一致,所以你只需要编写一次代码。

轻量级闪回退
大多数Flash视频播放器是巨大的。除了正在播放的视频加载数以百计的额外千字节。Video.js自定义Flash后备球员比10K!这意味着你的视频加载速度更快,即使使用闪光灯时。
使用方法:
在<head>中加入代码:
<link href="http://vjs.zencdn.net/4.4/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/4.4/video.js"></script>
其中video-js.css和video.js是下载文件里的文件,相应的为文件所有地址。

在<body>中加入代码:
<video id="my_video_1" class="video-js vjs-default-skin" controls
preload="auto" width="640" height="264" poster="my_video_poster.png"
data-setup="{}">
<source src="my_video.mp4" type='video/mp4'>
<source src="my_video.webm" type='video/webm'>
</video>

播放器的下载地址可以在网上百度搜索到。

 

来源:互联网



上一篇:Dreamweaver网页有CSS时使用个别样式的方法

下一篇:静态网页制作与动态网页制作的区别

设为主页 | 加入收藏 | 联系我 | 手机版
免责声明:本站资料来源于互联网,其版权归原作者所有。
如内容涉及或侵犯了您的权益,请通知我!
66998.com.cn版权所有 Copyright©2009  桂ICP备08100152号
建议使用分辨率:1024*768及更高

桂公网安备 45082102000110号