<!DOCTYPE html>

<html lang="en" >

    <head>

        <meta charset="utf-8" />

        <title>HTML5 Video player jQuery plugin | Script Tutorials</title>

        <link href="css/player.css" rel="stylesheet" type="text/css" />

        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>

         <script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery-ui.js"></script>

        <script src="js/player.js"></script>

    </head>

    <body>

        <header>

            <h2>HTML5 Video player jQuery plugin</h2>

            <a href="http://www.script-tutorials.com/html5-video-player-jquery-plugin/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>

        </header>

        <div class="container">

            <div class="video_player">

                <video controls="controls" poster="media/poster.jpg" style="width:420px; height:300px;">

                    <source src="media/video.ogg" type="video/ogg" />

                    <source src="media/video.mp4" type="video/mp4" />

                    <source src="media/video.webm" type="video/webm" />

                </video>

                <div class="custom_controls">

                    <a class="play" title="Play"></a>

                    <a class="pause" title="Pause"></a>

                    <div class="time_slider"></div>

                    <div class="timer">00:00</div>

                    <div class="volume">

                        <div class="volume_slider"></div>

                        <a class="mute" title="Mute"></a>

                        <a class="unmute" title="Unmute"></a>

                    </div>

                </div>

            </div>

            <script>

                $(function() {

                    $('.video_player').myPlayer();

                });

            </script>

        </div>

    </body>

</html>

　　player.css

/* jquery */

*{

    margin:0;

    padding:0;

}

.container {

    color: #000;

    margin: 2px auto;

    position: relative;

    width: 420px;

}

#slideshow {

    border:1px #000 solid;

    box-shadow:4px 6px 6px #444444;

    display:block;

    margin:0 auto;

    height:300px;

    width:420px;

}

.container .slides {

    display:none;

}

.ui-slider-handle {

    display: block;

    margin-left: -9px;

    position: absolute;

    z-index: 2;

}

.ui-slider-range {

    bottom: 0;

    display: block;

    height: 100%;

    left: 0;

    position: absolute;

    width: 100%;

    z-index: 1;

}

/* player */

.video_player {

    background-color: #E8E8E8;

    border: 1px solid #888;

    float: left;

    padding: 10px;

    border-radius: 10px;

    -moz-border-radius: 10px;

    -webkit-border-radius: 10px;

}

/* controls */

.video_player .custom_controls {

    clear: both;

    height: 30px;

    padding-top: 5px;

    position: relative;

    width: 100%;

}

.play, .pause, .volume, .time_slider, .timer {

    float: left;

}

.play, .pause, .mute, .unmute {

    cursor: pointer;

}

.play, .pause {

    display: block;

    height: 24px;

    margin-left: 5px;

    margin-right: 15px;

    opacity: 0.8;

    width: 33px;

    transition: all 0.2s ease-in-out;

    -moz-transition: all 0.2s ease-in-out;

    -webkit-transition: all 0.2s ease-in-out;

    -o-transition: all 0.2s ease-in-out;

}

.play {

    background: url(../images/play.png) no-repeat;

}

.pause {

    background: url(../images/pause.png) no-repeat;

    display: none;

}

.play:hover, .pause:hover {

    opacity: 1;

}

.time_slider {

    border: 1px solid #5f5f5f;

    height: 10px;

    margin-top: 5px;

    position: relative;

    width: 420px;

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    background: #777777;

    background-image: -moz-linear-gradient(top, #777777, #9d9d9d);

    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #777777),color-stop(1, #9d9d9d));

}

.time_slider .ui-slider-handle {

    background: url(../images/handler.png) no-repeat;

    cursor: pointer;

    height: 16px;

    opacity: 0.8;

    top: -2px;

    width: 16px;

}

.time_slider .ui-slider-handle.ui-state-hover {

    opacity: 1;

}

.time_slider .ui-slider-range {

    border-radius: 5px;

    -moz-border-radius: 5px;

    -webkit-border-radius: 5px;

    background: #e9742e;

    background-image: -moz-linear-gradient(top, #e9742e, #c14901);

    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e9742e),color-stop(1, #c14901));

}

.timer {

    color: #000;

    font-size: 12px;

    margin-left: 10px;

    margin-top: 3px;

}

.volume {

    bottom: 0;

    color: #FFFFFF;

    height: 35px;

    overflow: hidden;

    padding: 5px 10px 0;

    position: absolute;

    right: 0;

    width: 33px;

}

.volume:hover {

    background: url(../images/volume.png) no-repeat scroll 8px 0 transparent;

    height: 161px;

}

.volume_slider {

    height: 105px;

    left: -1px;

    opacity: 0;

    position: relative;

    width: 33px;

}

.volume:hover .volume_slider {

    opacity: 1;

}

.volume_slider .ui-slider-handle {

    background: url(../images/handler.png) no-repeat;

    height: 15px;

    left: 9px;

    margin-bottom: -15px;

    margin-left: 0;

    opacity: 0.8;

    width: 14px;

}

.volume_slider .ui-slider-handle.ui-state-hover {

    opacity: 1;

}

.mute, .unmute {

    bottom: 7px;

    display: block;

    height: 23px;

    opacity: 0.8;

    position: absolute;

    text-indent: -999px;

    width: 33px;

}

.mute:hover, .unmute:hover {

    opacity: 1;

}

.mute {

    background: url(../images/vol_full.png) no-repeat;

}

.unmute {

    background: url(../images/vol_mute.png) no-repeat;

    display: none;

}

　　

player.js

function rectime(secs) {

    var hr = Math.floor(secs / 3600);

    var min = Math.floor((secs - (hr * 3600))/60);

    var sec = Math.floor(secs - (hr * 3600) - (min * 60));

    if (hr < 10) {hr = '0' + hr; }

    if (min < 10) {min = '0' + min;}

    if (sec < 10) {sec = '0' + sec;}

    if (hr) {hr = '00';}

    return hr + ':' + min + ':' + sec;

}

(function($) {

    $.fn.myPlayer = function() {

        return this.each(function() {

            // variables

            var $oMain = $(this);

            var $oVideo = $('video', $oMain);

            var $oPlay = $('.play', $oMain);

            var $oPause = $('.pause', $oMain);

            var $oTimeSlider = $('.time_slider', $oMain);

            var $oTimer = $('.timer', $oMain);

            var $oVolSlider = $('.volume_slider', $oMain);

            var $oMute = $('.mute', $oMain);

            var $oUnmute = $('.unmute', $oMain);

            var bTimeSlide = false;

            var iVolume = 1;

            // functions section

            var prepareTimeSlider = function() {

                if (! $oVideo[0].readyState) {

                    setTimeout(prepareTimeSlider, 1000);

                } else {

                    $oTimeSlider.slider({

                        value: 0,

                        step: 0.01,

                        orientation: 'horizontal',

                        range: 'min',

                        max: $oVideo[0].duration,

                        animate: true,

                        slide: function() {

                            bTimeSlide = true;

                        },

                        stop:function(e, ui) {

                            bTimeSlide = false;

                            $oVideo[0].currentTime = ui.value;

                        }

                    });

                };

            };

            // events section

            $oPlay.click(function () {

                $oVideo[0].play();

                $oPlay.hide();

                $oPause.css('display', 'block');

            });

            $oPause.click(function () {

                $oVideo[0].pause();

                $oPause.hide();

                $oPlay.css('display', 'block');

            });

            $oMute.click(function () {

                $oVideo[0].muted = true;

                $oVolSlider.slider('value', '0');

                $oMute.hide();

                $oUnmute.css('display', 'block');

            });

            $oUnmute.click(function () {

                $oVideo[0].muted = false;

                $oVolSlider.slider('value', iVolume);

                $oUnmute.hide();

                $oMute.css('display', 'block');

            });

            // bind extra inner events

            $oVideo.bind('ended', function() {

                $oVideo[0].pause();

                $oPause.hide();

                $oPlay.css('display', 'block');

            });

            $oVideo.bind('timeupdate', function() {

                var iNow = $oVideo[0].currentTime;

                $oTimer.text(rectime(iNow));

                if (! bTimeSlide)

                    $oTimeSlider.slider('value', iNow);

            });

            // rest initialization

            $oVolSlider.slider({

                value: 1,

                orientation: 'vertical',

                range: 'min',

                max: 1,

                step: 0.02,

                animate: true,

                slide: function(e, ui) {

                    $oVideo[0].muted = false;

                    iVolume = ui.value;

                    $oVideo[0].volume = ui.value;

                }

            });

            prepareTimeSlider();

            $oVideo.removeAttr('controls');

        });

    };

})(jQuery);

　　

HTML5 Video player jQuery plugin的更多相关文章

  1. Embed MP4 in HTML using flash-player(html5 video player)

    https://stackoverflow.com/questions/1000851/embed-mp4-in-html-using-flash-player ******************* ...

  2. Native Fullscreen JavaScript API (plus jQuery plugin)

    http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...

  3. The jQuery HTML5 Audio / Video Library (jQuery jPlayer插件给你的站点增加视频和音频功能)

    http://jplayer.org/ The jQuery HTML5 Audio / Video Library jPlayer is the completely free and open s ...

  4. [jPlayer] HTML5 Audio & Video for jQuery

    ---------------------------------------------------------------------------------------------------- ...

  5. 使用jQuery和CSS自定义HTML5 Video 控件 简单适用

    Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...

  6. HTML5 stream video player

    HTML5 stream video player Aliplayer https://player.alicdn.com/aliplayer/index.html https://help.aliy ...

  7. The ultimate jQuery Plugin List(终极jQuery插件列表)

    下面的文章可能出自一位奥地利的作者,  列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...

  8. HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速

    Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...

  9. html5 video标签如何禁止视频下载

    html5 video标签如何禁止视频下载 一.总结 一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

随机推荐

  1. [.net 面向对象程序设计深入]（26）实战设计模式——策略模式 Strategy （行为型）

    [.net 面向对象程序设计深入](26)实战设计模式——策略模式 Strategy (行为型) 1,策略模式定义 策略模式定义了一系列的算法,并将每一个算法封装起来,而且使它们还可以相互替换.策略模 ...

  2. monkey 命令详解

    monkey命令详解   1.  $ adb shell monkey <event-count>                <event-count>是随机发送事件数 例 ...

  3. Python学习宝典，Python400集让你成为从零基础到手写神经网络的Python大神

    当您学完Python,你学到了什么? 开发网站! 或者, 基础语法要点.函数.面向对象编程.调试.IO编程.进程与线程.正则表达式... 当你学完Python,你可以干什么? 当程序员! 或者, 手写 ...

  4. [Swift]LeetCode38. 报数 | Count and Say

    The count-and-say sequence is the sequence of integers with the first five terms as following: 1. 1 ...

  5. [Swift]LeetCode58. 最后一个单词的长度 | Length of Last Word

    Given a string s consists of upper/lower-case alphabets and empty space characters ' ', return the l ...

  6. [Swift]LeetCode83. 删除排序链表中的重复元素 | Remove Duplicates from Sorted List

    Given a sorted linked list, delete all duplicates such that each element appear only once. Example 1 ...

  7. [Swift]LeetCode605. 种花问题 | Can Place Flowers

    Suppose you have a long flowerbed in which some of the plots are planted and some are not. However, ...

  8. JDBC也就那么回事

    JDBC 一.JDBC概述 为什么要使用JDBC? JDBC:Java DataBase Connectivity,是SUN公司提供的一套操作数据库的标准规范(技术). JDBC与数据库驱动的关系:接 ...

  9. shell cut 应用实战

    简介: cut是一个强大文本处理工具,它可以将文本按列进行划分的文本处理.cut命令逐行读入文本,然后按列划分字段并进行提取.输出等操作. 命令格式: cut [option] filename ca ...

  10. asp.net core 系列 21 EF现有数据库进行反向工程

    一.概述 在上篇中使用EF基于数据模型创建数据库,  本篇继续使用 EF  基于数据库创建数据模型.  实现对已有数据库进行反向工程,来构建数据访问的 ASP.NET Core MVC 应用程序.已有 ...