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

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

weixin_30689307

96人浏览 · 2012-12-06 09:49:00

weixin_30689307 · 2012-12-06 09:49:00 发布

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

由于是最后一篇文章：

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

Wijmo 中文网站：http://www.gcpowertools.com.cn/products/c1_asp_overview.htm
开源Wijmo jQuery 讨论社区： http://gcdn.grapecity.com/index.aspx
Wijmo 在线演示 Demo（包括本系列文章的所有控件演示）：http://www.gcpowertools.com.cn/LiveSamples/C1Wijmo/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>

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

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);

转载于:https://www.cnblogs.com/C1SupportTeam/archive/2012/12/06/2804415.html

开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

“小满”安全车控操作系统正式在AtomGit开源

10月24日，由中国汽车工业协会指导，普华基础软件股份有限公司主办的“小满”安全车控操作系统开源发布会暨共建计划说明会成功举行。普华基础软件宣布将安全车控操作系统“小满”（简称“小满”）V24.10源代码正式在开放原子开源基金会（简称“基金会”）旗下AtomGit开源协作平台开源，并在AtomGit平