HTML5 Video player jQuery plugin

<!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的更多相关文章

Embed MP4 in HTML using flash-player(html5 video player)
https://stackoverflow.com/questions/1000851/embed-mp4-in-html-using-flash-player ******************* ...
Native Fullscreen JavaScript API (plus jQuery plugin)
http://johndyer.name/native-fullscreen-javascript-api-plus-jquery-plugin/ HTML5 <video> is gre ...
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 ...
[jPlayer] HTML5 Audio & Video for jQuery
---------------------------------------------------------------------------------------------------- ...
使用jQuery和CSS自定义HTML5 Video 控件简单适用
Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的原生态浏览器视频空间.我们制作自定义视频控件为了在所有的浏览器中 ...
HTML5 stream video player
HTML5 stream video player Aliplayer https://player.alicdn.com/aliplayer/index.html https://help.aliy ...
The ultimate jQuery Plugin List(终极jQuery插件列表)
下面的文章可能出自一位奥地利的作者, 列出很多jQuery的插件.类似的网站:http://jquerylist.com/原文地址: http://www.kollermedia.at/archiv ...
HW Video Acceleration in Chrome/Chromium HTML5 video 视频播放硬件加速
Introduction Video decode (e.g. YouTube playback) and encode (e.g. video chat applications) are some ...
html5 video标签如何禁止视频下载
html5 video标签如何禁止视频下载一.总结一句话总结:bing方法给video对象绑定return false的匿名方法. 1.html5 video标签如何禁止视频下载? bing方法给 ...

随机推荐

Data Center手册(4)：设计
基础架构拓扑图 Switching Path L3 routing at aggregation layer L2 switching at access layer L3 switch融合了三种功 ...
Lesson 27 A wet night
Text Late in the afternoon, the boys put up their tent in the middle of a feild. As soon as this was ...
FFmpeg 结构体学习(七)： AVIOContext 分析
在上文FFmpeg 结构体学习(六): AVCodecContext 分析我们学习了AVCodec结构体的相关内容.本文,我们将讲述一下AVIOContext. AVIOContext是FFMPEG管 ...
SQL 常用语法记录
SQL语法注意:SQL 对大小写不敏感可以把 SQL 分为两个部分:数据操作语言 (DML) 和数据定义语言 (DDL). 数据操作语言 (DML) SQL (结构化查询语言)是用于执行查询的语 ...
机器学习入门 - Google机器学习速成课程 - 笔记汇总
机器学习入门 - Google机器学习速成课程 https://www.cnblogs.com/anliven/p/6107783.html MLCC简介前提条件和准备工作完成课程的下一步机器学 ...
想成为Python全栈开发工程师必须掌握的技能
什么是Python全栈工程师? 即从前端页面的实现,到后台代码的编写,再到数据库的管理,一人可以搞定一个公司网站的所有事情,真正实现全栈开发. 全栈只是个概念也分很多种类真正的全栈工程师涵盖了we ...
专访 | 新浪架构师：0-5年Java工程师的职业规划如何做？
经历了2018年末的阵痛,大家都积攒着一股暗劲蠢蠢欲动. 3月初即将迎来2019年互联网行业换工作的大潮,技术工程师的升级换位对于一家互联网公司来说无疑是命脉般的存在——技术强则公司强! 如何做一个抢 ...
MT2018笔试题之计算数字位数
一.计算数字位数 1.题目给定一个数字T,计算从1到T的所有正整数的位数和.比如T=13,则12345678910111213有17位数字. 输入描述 3 13 4 5 输出 17 4 5 2.思路 ...
Elasticsearch Document
1. 基本概念回顾 1.1. Node 节点是一个服务器,它是集群的一部分,存储数据,并参与集群的索引和搜索功能节点有一个名称标识,该名称在缺省情况下是在启动时分配给节点的随机全局惟一标识符(U ...
SpringBoot+Elasticsearch
1. 前言 1.1. 集成方式 Spring Boot中集成Elasticsearch有4种方式: REST Client Jest Spring Data Spring Data Elastic ...

HTML5 Video player jQuery plugin

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

随机推荐

热门专题