不得不爱开源 Wijmo jQuery 插件集（15）-【HTML5-视频播放器】(附页面展示和源码)

HTML5 话题一直炙手可热，今天我给大家介绍一款开源基于 jQuery 和 HTML5 技术实现视频播放器-Wijvideoplayer。ComponnetOne Wijmo 一直致力于帮助用户创建紧跟当前流行趋势的Web应用系统。Wijmo 是一款集HTML5、jQuery、CSS3、和 SVG 多项前沿技术于一体的控件套包。

这也是“不得不爱开源 Wijmo jQuery 插件集”系列文章的最后一篇文章了。依然要感谢朋友们的支持，我们一直致力于让更多的朋友试用、使用及用好控件。大家如果有意见或建议，我们非常愿意和您交流。

由于是最后一篇文章：

首先推荐一些网络资源，链接为 Wijmo 的中文支持网站，大家在使用过程中遇到问题，欢迎发帖询问：

如果你是第一次看本系列文章，那么还可以参考本系列的其他几篇文章，相信会给你带来更多惊喜：

首先让我们看看 Wijvideoplayer 给我们带来了哪些惊喜？

Wijmo Video 播放器插件，结合 HTML5 和 jQuery 技术实现了一款全功能的视频播放器。我们可以使用 Wijvideoplayer 在所有主流浏览器中播放视频、添加书签以及在嵌入广告。它包括标准的视频播放选项。以及全屏显示和音量控制功能，在本片文章中，我们也将嵌入段 Wijmo 的宣传视频，希望大家能够喜欢。

全屏模式

允许最终用户以全屏模式浏览视频。

控制按钮

提供 播放、暂停、静音、音量控制，全屏切换按钮。当你需要最大化播放器时，可以隐藏工具条。

建立你的第一个 Wijvideoplayer。

在记事本中，创建 HTML 页面, 添加以下标记并且保存为 .html 扩展类型。

<!DOCTYPE HTML>

<HTML>

<head>

</head>

<body>

</body>

</HTML>

 

添加以下 CDN 引用，查看 http://wijmo.com/downloads/#wijmo-cdn。添加以下代码到 HTML <head> 标签下。例如:

<!--jQuery References-->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js" type="text/javascript"></script>




<!--Theme-->

<link href="http://cdn.wijmo.com/themes/rocket/jquery-wijmo.css" rel="stylesheet" type="text/css" title="rocket-jqueryui" />




<!--Wijmo Widgets CSS-->

<link href="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.2.0.min.css" rel="stylesheet" type="text/css" />




<!--Wijmo Widgets JavaScript-->

<script src="http://cdn.wijmo.com/jquery.wijmo-open.all.2.2.0.min.js" type="text/javascript"></script>

<script src="http://cdn.wijmo.com/jquery.wijmo-complete.all.2.2.0.min.js" type="text/javascript"></script>

 

<body> 标签下, 添加以下代码。

<video controls="controls" id="vid1" width="400" height="275">

<source src="http://cdn.wijmo.com/movies/wijmo.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>

<source src="http://cdn.wijmo.com/movies/wijmo.mp4video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>

HTML5 is required to see this video.

</video>

 

<video> 元素创建 video 插件； id 为'vid1',，’vid1’ 将会调用 jQuery script 初始化插件。

在<head> 标签下，添加如下引用：

<script type="text/javascript">

$(document).ready(function () {

$('#vid1').wijvideo(

{

fullScreenButtonVisible: false,

showControlsOnHover: false

});

});

</script>

定制 CSS 样式：

<style type="text/css">#dialog label, #dialog input{display: block;}

#dialog label{margin-top: 0.5em;}

#dialog input, #dialog textarea{width: 95%;}

#tabs{margin-top: 1em;}

#tabs li .ui-icon-close{float: left; margin: 0.4em 0.2em 0 0; cursor: pointer;}

#add_tab{cursor: pointer;}

</style>

 

运行你的网页，你会看到如下效果。

Wijvideoquickstart.png

 

wijprogressbar API 介绍：(点击隐藏 API

Options

fullScreenButtonVisible
设置全屏按钮是否可见。
Type: Boolean
Default: true
Code Example:

$(".video").wijvideo("option", "fullScreenButtonVisible", false)

showControlsOnHover
设置是否仅在鼠标 hover 时显示控件。
Type: Boolean
Default: true
Code Example:

$(".video").wijvideo({

showControlsOnHover: false

});

Methods

destroy
使  Wijvideoplayer 回到初始化状态。
Code Example:

$("#element").wijvideo("destroy");

getHeight
获取 Wijvideoplayer 高度（像素）。
Code Example:

$("#element").wijvideo("getHeight");

getWidth
获取 Wijvideoplayer 宽度（像素）。
Code Example:

$("#element").wijvideo("getWidth");

pause
暂停播放。
Code Example:

$("#element").wijvideo("pause");

play
播放视频。
Code Example:

$("#element").wijvideo("play");

setHeight
设置 Wijvideoplayer 高度（像素）。
Parameters:
height: Height value in pixel.
Code Example:

$("#element").wijvideo("setHeight", 400);

setWidth
设置 Wijvideoplayer 宽度（像素）。
Parameters:
width: Width value in pixel.
Code Example:

$("#element").wijvideo("setWidth", 600);

posted @ 2012-12-06 09:49  葡萄城开发工具  阅读(3296)  评论(1)  编辑  收藏  举报