视频技术

FFmpeg red5 nginx Html5 rtsp rtmp

·您当前的位置：首页 > 技术教程 > Html5技术 >

[html5]html5视频播放器skin界面制作的源代码例子

时间:2017-09-25 18:21酷播
[html5]html5视频播放器skin界面制作的源代码例子

[html5]html5视频播放器skin界面制作的源代码例子

JS代码：

  1. // 为了不随意的创建全局变量，我们将我们的代码放在一个自己调用自己的匿名函数中，这是一个好的编程习惯 
  2.         (function(window, document){ 
  3.             // 获取要操作的元素 
  4.             var video = document.getElementById("video"); 
  5.             var videoControls = document.getElementById("videoControls"); 
  6.             var videoContainer = document.getElementById("videoContainer"); 
  7.             var controls = document.getElementById("video_controls"); 
  8.             var playBtn = document.getElementById("playBtn"); 
  9.             var fullScreenBtn = document.getElementById("fullScreenBtn"); 
  10.             var progressWrap = document.getElementById("progressWrap"); 
  11.             var playProgress = document.getElementById("playProgress"); 
  12.             var fullScreenFlag = false; 
  13.             var progressFlag; 
  14.  
  15.             // 创建我们的操作对象，我们的所有操作都在这个对象上。 
  16.             var videoPlayer = { 
  17.                 init: function(){ 
  18.                     var that = this; 
  19.                     video.removeAttribute("controls"); 
  20.                     bindEvent(video, "loadeddata", videoPlayer.initControls); 
  21.                     videoPlayer.operateControls(); 
  22.                 }, 
  23.                 initControls: function(){ 
  24.                     videoPlayer.showHideControls(); 
  25.                 }, 
  26.                 showHideControls: function(){ 
  27.                     bindEvent(video, "mouseover", showControls); 
  28.                     bindEvent(videoControls, "mouseover", showControls); 
  29.                     bindEvent(video, "mouseout", hideControls); 
  30.                     bindEvent(videoControls, "mouseout", hideControls); 
  31.                 }, 
  32.                 operateControls: function(){ 
  33.                     bindEvent(playBtn, "click", play); 
  34.                     bindEvent(video, "click", play); 
  35.                     bindEvent(fullScreenBtn, "click", fullScreen); 
  36.                     bindEvent(progressWrap, "mousedown", videoSeek); 
  37.                 } 
  38.             } 
  39.  
  40.             videoPlayer.init(); 
  41.  
  42.             // 原生的JavaScript事件绑定函数 
  43.             function bindEvent(ele, eventName, func){ 
  44.                 if(window.addEventListener){ 
  45.                     ele.addEventListener(eventName, func); 
  46.                 } 
  47.                 else{ 
  48.                     ele.attachEvent('on' + eventName, func); 
  49.                 } 
  50.             } 
  51.             // 显示video的控制面板 
  52.             function showControls(){ 
  53.                 videoControls.style.opacity = 1; 
  54.             } 
  55.             // 隐藏video的控制面板 
  56.             function hideControls(){ 
  57.                 // 为了让控制面板一直出现，我把videoControls.style.opacity的值改为1 
  58.                 videoControls.style.opacity = 1; 
  59.             } 
  60.             // 控制video的播放 
  61.             function play(){ 
  62.                 if ( video.paused || video.ended ){               
  63.                     if ( video.ended ){  
  64.                         video.currentTime = 0; 
  65.                         }  
  66.                     video.play(); 
  67.                     playBtn.innerHTML = "暂停";  
  68.                     progressFlag = setInterval(getProgress, 60); 
  69.                 }  
  70.                 else{  
  71.                     video.pause();  
  72.                     playBtn.innerHTML = "播放"; 
  73.                     clearInterval(progressFlag); 
  74.                 }  
  75.             } 
  76.             // 控制video是否全屏，额这一部分没有实现好，以后有空我会接着研究一下 
  77.             function fullScreen(){ 
  78.                 if(fullScreenFlag){ 
  79.                     videoContainer.webkitCancelFullScreen(); 
  80.                 } 
  81.                 else{ 
  82.                     videoContainer.webkitRequestFullscreen(); 
  83.                 } 
  84.             } 
  85.             // video的播放条 
  86.             function getProgress(){ 
  87.                 var percent = video.currentTime / video.duration; 
  88.                 playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px"; 
  89.                 showProgress.innerHTML = (percent * 100).toFixed(1) + "%"; 
  90.             } 
  91.             // 鼠标在播放条上点击时进行捕获并进行处理 
  92.             function videoSeek(e){ 
  93.                 if(video.paused || video.ended){ 
  94.                     play(); 
  95.                     enhanceVideoSeek(e); 
  96.                 } 
  97.                 else{ 
  98.                     enhanceVideoSeek(e); 
  99.                 } 
  100.  
  101.             } 
  102.             function enhanceVideoSeek(e){ 
  103.                 clearInterval(progressFlag); 
  104.                 var length = e.pageX - progressWrap.offsetLeft; 
  105.                 var percent = length / progressWrap.offsetWidth; 
  106.                 playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px"; 
  107.                 video.currentTime = percent * video.duration; 
  108.                 progressFlag = setInterval(getProgress, 60); 
  109.             } 
  110.  
  111.         }(this, document)) 

html代码：

  1. <!DOCTYPE html> 
  2. <html lang="en"> 
  3. <head> 
  4.     <meta charset="UTF-8"> 
  5.     <title>HTML5-Video-Player</title> 
  6.     <style type="text/css"> 
  7.         .videoPlayer{ 
  8.             border: 1px solid #000; 
  9.             width: 600px; 
  10.         } 
  11.         #video{ 
  12.             margin-top: 0px; 
  13.         } 
  14.         #videoControls{ 
  15.             width: 600px; 
  16.             margin-top: 0px; 
  17.         } 
  18.         .show{ 
  19.             opacity: 1; 
  20.         } 
  21.         .hide{ 
  22.             opacity: 0; 
  23.         } 
  24.         #progressWrap{ 
  25.             background-color: black; 
  26.             height: 25px; 
  27.             cursor: pointer; 
  28.         } 
  29.         #playProgress{ 
  30.             background-color: red; 
  31.             width: 0px; 
  32.             height: 25px; 
  33.             border-right: 2px solid blue; 
  34.         } 
  35.         #showProgress{ 
  36.             background-color: ; 
  37.             font-weight: 600; 
  38.             font-size: 20px; 
  39.             line-height: 25px; 
  40.         } 
  41.     </style> 
  42. </head> 
  43. <body> 
  44.     <div class=""> 
  45.         <h1>HTML5_Video_Player</h1> 
  46.         <div class="videoPlayer" id="videoContainer"> 
  47.             <video id="video"  
  48.             width="600" height="360"  
  49.             preload controls 
  50.             > 
  51.                 <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type='video/mp4'> 
  52.                 <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'> 
  53.             </video> 
  54.             <div id="videoControls">  
  55.                 <div id="progressWrap">   
  56.                     <div id="playProgress">   
  57.                         <span id="showProgress">0</span>  
  58.                     </div> 
  59.                 </div> 
  60.                 <div> 
  61.                     <button id="playBtn" title="Play"> 播放 </button>  
  62.                     <button id="fullScreenBtn" title="FullScreen Toggle">  全屏 </button> 
  63.                 </div>  
  64.             </div>  
  65.         </div> 
  66.     </div> 
  67. </body> 
  68. </html> 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
  2. <html> 
  3. <head> 
  4. <meta http-equiv="pragma" content="no-cache"> 
  5. <meta name="wap-font-scale" content="no"> 
  6. <meta name="format-detection" content="telephone=no"/> 
  7. <meta name="apple-mobile-web-app-capable" content="yes"> 
  8. <meta name="apple-mobile-web-app-status-bar-style" content="blank"> 
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
  10. <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 
  11. <script type="text/javascript" src="http://m.the3ctv.com/wap/jquery/jquery-1.8.3.min.js"></script> 
  12. <link type="text/css" rel="stylesheet" href="http://m.the3ctv.com/wap/css/common.css"> 
  13. <title>播放</title> 
  14. <style type="text/css">/*控制条的样式*/ 
  15. .video_play_main_div{background-color:#000000;width:100%;height:100%;} 
  16. .video_play_main_div .header{height:45px;} 
  17. .video_play_main_div .header a:nth-child(1){display: block;float: left;} 
  18. .video_play_main_div .header a:nth-child(1) img{height: 20px;margin-top: 12.5px;margin-left: 12.5px;} 
  19. .video_play_main_div .header a:nth-child(2){display: block;float: right;} 
  20. .video_play_main_div .header a:nth-child(2) img{height: 35px;margin-top: 5px;margin-right: 7px;} 
  21. .video_play_main_div .play_video{width:100%;position:absolute;top:50%;} 
  22. .video_play_main_div .play_video .preview{display:none;top: 50%;position: relative;height: 20px;text-align: center;background-color: white;border-radius: 20px;width: auto;} 
  23. .video_play_main_div .replay_name{color: white;position: absolute;bottom: 0px;margin-bottom: 20%;width: 100%;text-align: center;} 
  24. .the3ctv_video_control{width:100%;position:absolute;top: 61%;z-index: 3;background-color: black;height: 32px;} 
  25. .the3ctv_video_control a:nth-child(1){position: relative;float: left;} 
  26. .the3ctv_video_control a:nth-child(1) img{width: 25px;margin-left: 10px;} 
  27. .the3ctv_video_control em{float:left;color:white;margin-top:4px;} 
  28. .the3ctv_video_control em i:nth-child(1){} 
  29. .the3ctv_video_control em i:nth-child(2){color:#b4b4b4;} 
  30. .the3ctv_video_control span{display: block;height: 4px;width: 52%;margin-left: 2%;background-color: #505050;border-radius: 4px;margin-top: 11px;float:left;} 
  31. .the3ctv_video_control span b:nth-child(1){z-index:1;float:left;position:relative;width: 0%;background-color: #b4b4b4;display: block;height: 100%;border-radius: 4px;} 
  32. .the3ctv_video_control span b:nth-child(2){z-index:2;position:relative;float: left;width: 8px;height: 8px;background-color: white;border-radius: 8px;margin-top: -2px;margin-left: -8px;} 
  33. .the3ctv_video_control span b:nth-child(3){position: relative;background-color: white;display: block;height: 4px;border-radius: 4px;} 
  34. .the3ctv_video_control u{float:left;} 
  35. .the3ctv_video_control u img{display: block;width: 25px;margin-left: 5px;} 
  36. .trump-control-bottom,.trump-control-bottom-flow{display:none;} 
  37.  
  38. video::-webkit-media-controls-enclosure { 
  39.     /*禁用播放器控制栏的样式*/ 
  40.     /*display: none !important;*/ 
  41. } 
  42.  
  43. </style> 
  44. <script type="text/javascript"> 
  45. var flag = false; 
  46.      var initProgressBar = function(){        //进度条相关操作 
  47.          var main_div = $("#wap_video_play_main_div"); 
  48.          var video = $("video",main_div); 
  49.          var timeDrag = false;   /* Drag status */ 
  50.          $("span[name='progress']",main_div).mousedown(function(e) {     //进度条的按下操作 
  51.             timeDrag = true;  
  52.             updatebar(e.pageX); 
  53.          }); 
  54.          $(document).mouseup(function(e) {               //松开 
  55.             if(timeDrag) { 
  56.                timeDrag = false; 
  57.                updatebar(e.pageX); 
  58.             } 
  59.          }); 
  60.          $(document).mousemove(function(e) {  //鼠标移动事件 
  61.             if(timeDrag) { 
  62.                updatebar(e.pageX); 
  63.             } 
  64.          }); 
  65.  
  66.          //update Progress Bar control 
  67.          var updatebar = function(x) {  //更新时间与播放条进度 
  68.             var progress = $("span[name='progress']",main_div); 
  69.             var maxduration = video[0].duration; //Video duraiton 
  70.             var position = x - progress.offset().left; //Click pos 
  71.             var percentage = 100 * position / progress.width(); 
  72.             //Check within range 
  73.             if(percentage > 100) { 
  74.                percentage = 100; 
  75.             } 
  76.             if(percentage < 0) { 
  77.                percentage = 0; 
  78.             } 
  79.             //Update progress bar and video currenttime 
  80.             $("span b:eq(0)",main_div).css('width', percentage+'%'); 
  81.             video[0].currentTime = maxduration * percentage / 100; 
  82.             if(percentage==100){ 
  83.                 $("a[name='pause'] img",main_div).attr("src","F://pause.png") 
  84.             } 
  85.          }; 
  86.          $('u img',main_div).unbind().bind('click', function() {             //控制视频全屏与退出全屏 
  87.            //For Webkit 
  88.            video[0].webkitEnterFullscreen(); 
  89.  
  90.            //For Firefox 
  91.            video[0].mozRequestFullScreen(); 
  92.            video[0].controls=false; 
  93.            return false; 
  94.         }); 
  95.      } 
  96.     var initTimeLength = function(timeLength){             //根据秒数格式化时间 
  97.         timeLength = parseInt(timeLength); 
  98.         var second = timeLength%60; 
  99.         var minute = (timeLength-second)/60; 
  100.         return (minute<10?"0"+minute:minute)+":"+(second<10?"0"+second:second); 
  101.     } 
  102.     var initVideo = function(player){ 
  103.             flag = true; 
  104.             var main_div = $("#wap_video_play_main_div"); 
  105.         main_div.on("click","a[name='pause']",function(){    //暂停   继续 
  106.                 var video = $("video",main_div); 
  107.                 video.css("top","0px") 
  108.                 video.css("top","50%") 
  109.                 if(video[0].paused) { 
  110.                     video[0].play(); 
  111.             $("img",$(this)).attr("src","F://playing.png") 
  112.                 }else { 
  113.                      video[0].pause(); 
  114.                      $("img",$(this)).attr("src","F://pause.png") 
  115.                 } 
  116.                 return false; 
  117.             }); 
  118.             $("video",main_div).on('loadedmetadata', function() {       //获取全部视频长度 
  119.                 var video = $("video",main_div); 
  120.                $("i:eq(1)",main_div).html(initTimeLength(video[0].duration)); 
  121.             }); 
  122.             $("video",main_div).on('timeupdate', function() {           //实时更新播放进度条和时间 
  123.                 var video = $("video",main_div); 
  124.                 var currentPos = video[0].currentTime; //Get currenttime    //当前时间 
  125.                 var maxduration = video[0].duration; //Get video duration   //总时间 
  126.                 var percentage = 100 * currentPos / maxduration; //in % 
  127.                 $("i:eq(0)",main_div).html(initTimeLength(video[0].currentTime)); 
  128.                 $("span b:eq(0)",main_div).css("width",percentage+"%") 
  129.                 $("i:eq(1)",main_div).html(initTimeLength(video[0].duration)); 
  130.                 if(currentPos==maxduration){ 
  131.                     $("a[name='pause'] img",main_div).attr("src","F://pause.png") 
  132.                 } 
  133.             }); 
  134.             //$("video",main_div)[0].controls=false; 
  135.             //$("video",main_div).removeAttr("controls"); 
  136.             //$("video",main_div).attr("controls",null);           //隐藏控制条 
  137.             var startBuffer = function() {                       //预加载视频的 
  138.                 var video = $("video",main_div); 
  139.                var maxduration = video[0].duration; 
  140.                var currentBuffer = video[0].buffered.end(0); 
  141.                var percentage = 100 * currentBuffer / maxduration; 
  142.                $("span b:eq(2)").css('width', percentage+'%'); 
  143.  
  144.                if(currentBuffer < maxduration) { 
  145.                   setTimeout(startBuffer, 500); 
  146.                } 
  147.             }; 
  148. //          setTimeout(startBuffer, 500); 
  149.             initProgressBar(); 
  150.     } 
  151.     var setControl = function(){ 
  152.         initVideo(); 
  153. //      $("#wap_video_play_main_div video").removeAttr("controls"); 
  154. //      $(".trump-control-bottom,.trump-control-bottom-flow").hide(); 
  155. //      $("#trump_main_unique_1 div[data-resize-module='bottom']").closest("div").hide(); 
  156.     } 
  157.     $(function(){ 
  158.         var main_div = $("#wap_video_play_main_div"); 
  159.         main_div.height($(window).height()); 
  160.         var height = ($(window).width()/16)*9; 
  161.  
  162.         $("video",main_div).height(height).css("margin-top",-(height/2)) 
  163.  
  164.  
  165.         setControl() 
  166.  
  167.     }); 
  168. </script> 
  169. </head> 
  170. <body> 
  171.     <div class="video_play_main_div" id="wap_video_play_main_div"> 
  172.  
  173.         <video controls="controls" autobuffer oncontextmenu="return false;" preload="none" x-webkit-airplay="true" webkit-playsinline="true" id="video_id_1464329192793" width="100%" style="z-index: 1; overflow: hidden; box-sizing: border-box; position: absolute; left: 0px; top: 50%;"> 
  174.             <source src="http://200004500.vod.myqcloud.com/200004500_44e60aba1da111e689690f47f5e05cec.f30.mp4" type="video/mp4"> 
  175.         </video> 
  176.         <div class="the3ctv_video_control"> 
  177.             <a name="pause"> 
  178.                 <img src="F://pause.png"/> 
  179.             </a> 
  180.             <em><i name="time">00:00</i>&nbsp;|&nbsp;<i>01:21</i></em> 
  181.             <span name="progress"> 
  182.                 <b></b> 
  183.                 <b></b> 
  184.                 <b></b> 
  185.             </span> 
  186.             <u><img alt="" src="http://m.the3ctv.com/wap/images/video/fullScreen.png"/></u> 
  187.         </div>  
  188.     </div> 
  189. </body> 
  190. </html> 

来源: http://blog.csdn.net/ishangxinyu/article/details/51882518

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器