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

　　

最新文章

  1. C#常用异常类记录
  2. Number类型
  3. 看来是要改用Gecko的节奏，放弃Awesomium吧
  4. Spring的配置文件
  5. PPTP协议握手流程分析
  6. MongoDB集群与LBS应用系列(一)
  7. ural 1119. Metro(动态规划)
  8. Python重定向到文件
  9. Android项目开发填坑记-so文件引发的攻坚战
  10. 洛谷P3396 哈希冲突
  11. 导出表结构到Excel 生成代码用
  12. mysql学习笔记五 —— MHA
  13. Linux下安装mysql（示例mysql5.6安装）
  14. 使用vw做移动端页面的适配
  15. 物联网架构成长之路(16)-SpringCloud从入门到吹水
  16. java_5.1 for循环
  17. VirtualBox安装Mac OS 10.11——虚拟机安装黑苹果
  18. post请求参数Json字符串包含数组的校验和处理
  19. On premise TFS Git OAuth clone failed on agent
  20. ReentrantLock 使用

热门文章

  1. 基础：新建个maven项目
  2. 2种不同方式实现背景图里加入文字的简单CSS样式
  3. [Swift]LeetCode997. 找到小镇的法官 | Find the Town Judge
  4. 目标文件去除header一行开头的#号
  5. Python档案袋（ Socket 与 ScoketServer 通信 ）
  6. Hbase篇--Hbase和MapReduce结合Api
  7. 从源码分析如何优雅的使用 Kafka 生产者
  8. nginx系列 2 概述
  9. 有道云笔记 - Markdown模板(文首附markdown源码，即.md文件)
  10. C语言中你可能不熟悉的头文件(stdlib.h)