不得不愛開源 Wijmo jQuery 插件集（15）-【HTML5-視頻播放器】(附頁面展示和源碼)

本文轉載自查看原文 2012-12-06 09:49 3057 Studio for ASP.NET Wijmo/ Wijmo

HTML5 話題一直炙手可熱，今天我給大家介紹一款開源基於 jQuery 和 HTML5 技術實現視頻播放器-Wijvideoplayer。ComponnetOne Wijmo 一直致力於幫助用戶創建緊跟當前流行趨勢的Web應用系統。Wijmo 是一款集HTML5、jQuery、CSS3、和 SVG 多項前沿技術於一體的控件套包。

這也是“不得不愛開源 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);

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 不得不愛開源 Wijmo jQuery 插件集（3）-【菜單】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（4）-【手風琴效果】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（5）-【對話框】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（7）-【進度條】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（9）-【日歷】(附頁面展示和源碼) 不得不愛開源 Wijmo jQuery 插件集（1）-【開篇】(附演示和源碼) 不得不愛開源 Wijmo jQuery 插件集（2）-【准備工作】(附30種Theme演示和源碼) Html5彈幕視頻播放器插件 HTML5視頻音頻播放器實例和源碼分享（一）視頻播放器——開源免費三大代表