<!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. js-day04--Ajax应用--二级联动

    Ajax概述和实用需求 Ajax介绍/阿贾克斯:一.Ajax不是一项具体的技术,而是几门技术的综合应用. Javascript.XHTML和CSS.DOM.XML和XMLHttpRequest.二.A ...

  2. JavaEE开发之基于Eclipse的环境搭建以及Maven Web App的创建

    本篇博客就完整的来聊一下如何在Eclipse中创建的Maven Project.本篇博客是JavaEE开发的开篇,也是基础.本篇博客的内容干货还是比较多的,而且比较实用,并且都是采用目前最新版本的工具 ...

  3. Vue 单文件元件 — vTabs

    简书原文 这是我做了第二个单文件元件 第一个在这里vCheckBox 这次这个叫vTabs,用于操作标签页 演示DEMO 演示DEMO2 - 子组件模式及别名 演示DEMO3 - 极简模式 示例: h ...

  4. [Swift]LeetCode281. 之字形迭代器 $ Zigzag Iterator

    Given two 1d vectors, implement an iterator to return their elements alternately. For example, given ...

  5. Storm学习笔记 - 消息容错机制

    Storm学习笔记 - 消息容错机制 文章来自「随笔」 http://jsynk.cn/blog/articles/153.html 1. Storm消息容错机制概念 一个提供了可靠的处理机制的spo ...

  6. Python档案袋（异常与异常捕获 )

    无异常捕获 程序遇到异常会中断 print( xxx ) print("---- 完 -----") 得到结果为: 有异常捕获 程序遇到异常会进入异常处理,并继续执行下面程序 tr ...

  7. BBS论坛（一）

    1.1.项目结构搭建 (1)创建flask项目Perfect_bbs,然后搭建项目结构如下: (2)构建蓝图 cms/views.py # cmd/views.py from flask import ...

  8. 从锅炉工到AI专家(9)

    无监督学习 前面已经说过了无监督学习的概念.无监督学习在实际的工作中应用还是比较多见的. 从典型的应用上说,监督学习比较多用在"分类"上,利用给定的数据,做出一个决策,这个决策在有 ...

  9. 深入理解Mybatis插件开发

    背景 关于Mybatis插件,大部分人都知道,也都使用过,但很多时候,我们仅仅是停留在表面上,知道Mybatis插件可以在DAO层进行拦截,如打印执行的SQL语句日志,做一些权限控制,分页等功能:但对 ...

  10. Chapter 4 Invitations——21

    "Dad?" I asked when he was almost done. “爸?”我当他快吃完的时候问道. "Yeah, Bella?" “怎么了,Bel ...