HTML5 Video player jQuery plugin

杨高翰
2023-12-01
<!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);

  

转载于:https://www.cnblogs.com/geovindu/p/10767048.html

 类似资料:

相关阅读

相关文章

相关问答