经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » JS/JS库/框架 » jQuery » 查看文章
HTML5 Video player jQuery plugin
来源：cnblogs　　作者：?Geovin Du Dream Park?　　时间：2019/4/26 8:47:51　　对本文有异议 
  1. <!DOCTYPE html>
  2. <html lang="en" >
  3.     <head>
  4.         <meta charset="utf-8" />
  5.         <title>HTML5 Video player jQuery plugin | Script Tutorials</title>    
  6.         <link href="css/player.css" rel="stylesheet" type="text/css" />
  7.         <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
  8.          <script type="text/javascript" src="js/jquery-ui-1.8.16/ui/jquery-ui.js"></script>
  9.         <script src="js/player.js"></script>
  10.     </head>
  11.     <body>
  12.         <header>
  13.             <h2>HTML5 Video player jQuery plugin</h2>
  14.             <a href="http://www.script-tutorials.com/html5-video-player-jquery-plugin/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
  15.         </header>
  16.         <div class="container">
  17.  
  18.             <div class="video_player">
  19.                 <video controls="controls" poster="media/poster.jpg" style="width:420px; height:300px;">
  20.                     <source src="media/video.ogg" type="video/ogg" />
  21.                     <source src="media/video.mp4" type="video/mp4" />
  22.                     <source src="media/video.webm" type="video/webm" />
  23.                 </video>
  24.                 <div class="custom_controls">
  25.                     <a class="play" title="Play"></a>
  26.                     <a class="pause" title="Pause"></a>
  27.                     <div class="time_slider"></div>
  28.                     <div class="timer">00:00</div>
  29.                     <div class="volume">
  30.                         <div class="volume_slider"></div>
  31.                         <a class="mute" title="Mute"></a>
  32.                         <a class="unmute" title="Unmute"></a>
  33.                     </div>
  34.                 </div>
  35.             </div>
  36.             <script>
  37.                 $(function() {
  38.                     $('.video_player').myPlayer();
  39.                 });
  40.             </script>
  41.  
  42.         </div>
  43.     </body>
  44. </html>

　　player.css

  1. /* jquery */
  2. *{
  3.     margin:0;
  4.     padding:0;
  5. }
  6.  
  7. .container {
  8.     color: #000;
  9.     margin: 2px auto;
  10.     position: relative;
  11.     width: 420px;
  12. }
  13. #slideshow {
  14.     border:1px #000 solid;
  15.     box-shadow:4px 6px 6px #444444;
  16.     display:block;
  17.     margin:0 auto;
  18.     height:300px;
  19.     width:420px;
  20. }
  21. .container .slides {
  22.     display:none;
  23. }
  24.  
  25.  
  26. .ui-slider-handle {
  27.     display: block;
  28.     margin-left: -9px;
  29.     position: absolute;
  30.     z-index: 2;
  31. }
  32. .ui-slider-range {
  33.     bottom: 0;
  34.     display: block;
  35.     height: 100%;
  36.     left: 0;
  37.     position: absolute;
  38.     width: 100%;
  39.     z-index: 1;
  40. }
  41.  
  42. /* player */
  43. .video_player {
  44.     background-color: #E8E8E8;
  45.     border: 1px solid #888;
  46.     float: left;
  47.     padding: 10px;
  48.  
  49.     border-radius: 10px;
  50.     -moz-border-radius: 10px;
  51.     -webkit-border-radius: 10px;
  52. }
  53.  
  54. /* controls */
  55. .video_player .custom_controls {
  56.     clear: both;
  57.     height: 30px;
  58.     padding-top: 5px;
  59.     position: relative;
  60.     width: 100%;
  61. }
  62. .play, .pause, .volume, .time_slider, .timer {
  63.     float: left;
  64. }
  65. .play, .pause, .mute, .unmute {
  66.     cursor: pointer;
  67. }
  68. .play, .pause {
  69.     display: block;
  70.     height: 24px;
  71.     margin-left: 5px;
  72.     margin-right: 15px;
  73.     opacity: 0.8;
  74.     width: 33px;
  75.  
  76.     transition: all 0.2s ease-in-out; 
  77.     -moz-transition: all 0.2s ease-in-out;
  78.     -webkit-transition: all 0.2s ease-in-out;
  79.     -o-transition: all 0.2s ease-in-out;
  80. }
  81. .play {
  82.     background: url(../images/play.png) no-repeat;
  83. }
  84. .pause {
  85.     background: url(../images/pause.png) no-repeat;
  86.     display: none;
  87. }
  88. .play:hover, .pause:hover {
  89.     opacity: 1;
  90. }
  91. .time_slider {
  92.     border: 1px solid #5f5f5f;
  93.     height: 10px;
  94.     margin-top: 5px;
  95.     position: relative;
  96.     width: 420px;
  97.  
  98.     border-radius: 5px;
  99.     -moz-border-radius: 5px;
  100.     -webkit-border-radius: 5px;
  101.  
  102.     background: #777777;
  103.     background-image: -moz-linear-gradient(top, #777777, #9d9d9d);
  104.     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #777777),color-stop(1, #9d9d9d));
  105. }
  106. .time_slider .ui-slider-handle {
  107.     background: url(../images/handler.png) no-repeat;
  108.     cursor: pointer;
  109.     height: 16px;
  110.     opacity: 0.8;
  111.     top: -2px;
  112.     width: 16px;
  113. }
  114. .time_slider .ui-slider-handle.ui-state-hover {
  115.     opacity: 1;
  116. }
  117. .time_slider .ui-slider-range {
  118.     border-radius: 5px;
  119.     -moz-border-radius: 5px;
  120.     -webkit-border-radius: 5px;
  121.  
  122.     background: #e9742e;
  123.     background-image: -moz-linear-gradient(top, #e9742e, #c14901);
  124.     background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #e9742e),color-stop(1, #c14901));
  125. }
  126. .timer {
  127.     color: #000;
  128.     font-size: 12px;
  129.     margin-left: 10px;
  130.     margin-top: 3px;
  131. }
  132. .volume {
  133.     bottom: 0;
  134.     color: #FFFFFF;
  135.     height: 35px;
  136.     overflow: hidden;
  137.     padding: 5px 10px 0;
  138.     position: absolute;
  139.     right: 0;
  140.     width: 33px;
  141. }
  142. .volume:hover {
  143.     background: url(../images/volume.png) no-repeat scroll 8px 0 transparent;
  144.     height: 161px;
  145. }
  146. .volume_slider {
  147.     height: 105px;
  148.     left: -1px;
  149.     opacity: 0;
  150.     position: relative;
  151.     width: 33px;
  152. }
  153. .volume:hover .volume_slider {
  154.     opacity: 1;
  155. }
  156. .volume_slider .ui-slider-handle {
  157.     background: url(../images/handler.png) no-repeat;
  158.     height: 15px;
  159.     left: 9px;
  160.     margin-bottom: -15px;
  161.     margin-left: 0;
  162.     opacity: 0.8;
  163.     width: 14px;
  164. }
  165. .volume_slider .ui-slider-handle.ui-state-hover {
  166.     opacity: 1;
  167. }
  168. .mute, .unmute {
  169.     bottom: 7px;
  170.     display: block;
  171.     height: 23px;
  172.     opacity: 0.8;
  173.     position: absolute;
  174.     text-indent: -999px;
  175.     width: 33px;
  176. }
  177. .mute:hover, .unmute:hover {
  178.     opacity: 1;
  179. }
  180. .mute {
  181.     background: url(../images/vol_full.png) no-repeat;
  182. }
  183. .unmute {
  184.     background: url(../images/vol_mute.png) no-repeat;
  185.     display: none;
  186. }

　　

 

 

player.js

  1. function rectime(secs) {
  2.     var hr = Math.floor(secs / 3600);
  3.     var min = Math.floor((secs - (hr * 3600))/60);
  4.     var sec = Math.floor(secs - (hr * 3600) - (min * 60));
  5.  
  6.     if (hr < 10) {hr = '0' + hr; }
  7.     if (min < 10) {min = '0' + min;}
  8.     if (sec < 10) {sec = '0' + sec;}
  9.     if (hr) {hr = '00';}
  10.     return hr + ':' + min + ':' + sec;
  11. }
  12.  
  13. (function($) {
  14.     $.fn.myPlayer = function() {
  15.         return this.each(function() {
  16.             // variables
  17.             var $oMain = $(this);
  18.             var $oVideo = $('video', $oMain);
  19.             var $oPlay = $('.play', $oMain);
  20.             var $oPause = $('.pause', $oMain);
  21.             var $oTimeSlider = $('.time_slider', $oMain);
  22.             var $oTimer = $('.timer', $oMain);
  23.             var $oVolSlider = $('.volume_slider', $oMain);
  24.             var $oMute = $('.mute', $oMain);
  25.             var $oUnmute = $('.unmute', $oMain);
  26.             var bTimeSlide = false;
  27.             var iVolume = 1;
  28.  
  29.             // functions section
  30.             var prepareTimeSlider = function() {
  31.                 if (! $oVideo[0].readyState) {
  32.                     setTimeout(prepareTimeSlider, 1000);
  33.                 } else {
  34.                     $oTimeSlider.slider({
  35.                         value: 0,
  36.                         step: 0.01,
  37.                         orientation: 'horizontal',
  38.                         range: 'min',
  39.                         max: $oVideo[0].duration,
  40.                         animate: true,
  41.                         slide: function() {
  42.                             bTimeSlide = true;
  43.                         },
  44.                         stop:function(e, ui) {
  45.                             bTimeSlide = false;
  46.                             $oVideo[0].currentTime = ui.value;
  47.                         }
  48.                     });
  49.                 };
  50.             };
  51.  
  52.             // events section
  53.             $oPlay.click(function () {  
  54.                 $oVideo[0].play();
  55.                 $oPlay.hide();
  56.                 $oPause.css('display', 'block');
  57.             });
  58.             $oPause.click(function () {  
  59.                 $oVideo[0].pause();
  60.                 $oPause.hide();
  61.                 $oPlay.css('display', 'block');
  62.             });
  63.             $oMute.click(function () {  
  64.                 $oVideo[0].muted = true;
  65.                 $oVolSlider.slider('value', '0');
  66.                 $oMute.hide();
  67.                 $oUnmute.css('display', 'block');
  68.             });
  69.             $oUnmute.click(function () {  
  70.                 $oVideo[0].muted = false;
  71.                 $oVolSlider.slider('value', iVolume);
  72.                 $oUnmute.hide();
  73.                 $oMute.css('display', 'block');
  74.             });
  75.  
  76.             // bind extra inner events
  77.             $oVideo.bind('ended', function() {
  78.                 $oVideo[0].pause();
  79.                 $oPause.hide();
  80.                 $oPlay.css('display', 'block');
  81.             });
  82.             $oVideo.bind('timeupdate', function() {
  83.                 var iNow = $oVideo[0].currentTime;
  84.                 $oTimer.text(rectime(iNow));
  85.                 if (! bTimeSlide)
  86.                     $oTimeSlider.slider('value', iNow);
  87.             });
  88.  
  89.             // rest initialization
  90.             $oVolSlider.slider({
  91.                 value: 1,
  92.                 orientation: 'vertical',
  93.                 range: 'min',
  94.                 max: 1,
  95.                 step: 0.02,
  96.                 animate: true,
  97.                 slide: function(e, ui) {
  98.                     $oVideo[0].muted = false;
  99.                     iVolume = ui.value;
  100.                     $oVideo[0].volume = ui.value;
  101.                 }
  102.             });
  103.             prepareTimeSlider();
  104.             $oVideo.removeAttr('controls');
  105.         });
  106.     };
  107. })(jQuery);

　　

原文链接：http://www.cnblogs.com/geovindu/p/10767048.html

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

jQuery热门文章

  • 初涉Ajax
  • jQuery 源码分析(十五) 数据操作模块 val详解
  • select 宽度跟随option内容自适应
  • 日期插件rolldate.js的使用
  • layer.prompt 增加placeholder 提示
  • jQuery实现简单五子棋游戏
  • layui+ztree 树状下拉框
  • 在你身边，为你设计PDF下载高清完整扫描原版
  • jQuery实现扫雷小游戏
  • uni-app通过canvas实现手写签名

    • jQuery推荐文章

  • jQuery实现扫雷小游戏
  • jQuery实现简单五子棋游戏
  • 详解jquery方法属性
  • jquery+h5实现九宫格抽奖特效（前后端代码）
  • jQuery实现弹弹球小游戏
  • jQuery常见事件的监听方式
  • JQuery总结 - 小杨-先生
  • jQuery的链式编程风格
  • 初识Vue2（一）：表单输入绑定（附Demo） - 熊泽-学习中的苦与乐
  • jQuery 笔记

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号