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方法给 ...
随机推荐
- Java精确测量代码运行时间
Java精确测量代码运行时间: --------------- long startTime = System.nanoTime(); //開始時間 for(int i = 0;i<10000; ...
- 【安富莱二代示波器教程】第6章 示波器设计—双通道ADC驱动
第6章 示波器设计—双通道ADC驱动 本章节为大家讲解示波器的ADC驱动,采用STM32自带ADC实现.关于STM32F429的ADC,可以说处处有地雷,不小心就踩上了,如果简单的使用, ...
- Redis的7个应用场景
一:缓存——热数据 热点数据(经常会被查询,但是不经常被修改或者删除的数据),首选是使用redis缓存,毕竟强大到冒泡的QPS和极强的稳定性不是所有类似工具都有的,而且相比于memcached还提供了 ...
- Python学到什么程度就可以去找工作？掌握这4点足够了！
大家在学习Python的时候,有人会问“Python要学到什么程度才能出去找工作”,对于在Python培训机构学习Python的同学来说这都不是问题,因为按照Python课程大纲来,一般都不会有什么问 ...
- Android 音视频开发(四)：使用 Camera API 采集视频数据
本文主要将的是:使用 Camera API 采集视频数据并保存到文件,分别使用 SurfaceView.TextureView 来预览 Camera 数据,取到 NV21 的数据回调. 注: 需要权限 ...
- [Swift]LeetCode348. 设计井字棋游戏 $ Design Tic-Tac-Toe
Design a Tic-tac-toe game that is played between two players on a n x n grid. You may assume the fol ...
- [Swift]LeetCode581. 最短无序连续子数组 | Shortest Unsorted Continuous Subarray
Given an integer array, you need to find one continuous subarray that if you only sort this subarray ...
- [Swift]LeetCode921.使括号有效的最少添加 | Minimum Add to Make Parentheses Valid
Given a string S of '(' and ')' parentheses, we add the minimum number of parentheses ( '(' or ')', ...
- postgresql 基础sql
创建用户和密码:crate user 用户名 with password '密码' : 创建 alter user 用户名 with password ’密码' ; 修改用户密码 查看用户信息: se ...
- TCP/IP 详解常用术语
业务需要,最近看TCP/IP 这本书,专业名词太多了,总结一下,给后来着参考,直接使用. 后续会在读书时慢慢添加. ACK:(ACKnowledgment)TCP首部中的确认标志. ARP:地址解析协 ...