API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Dec 19th, 2015
145
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 6.81 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html debug="true">
  3. <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  6.     <title>HTML5 MediaElement</title>  
  7.    
  8.     <script src="firebug-lite/build/firebug-lite.js"></script>
  9.    
  10.     <script>
  11.     if (typeof window.console == 'undefined') {
  12.         window.console = {log:function() {}};
  13.     }  
  14.     </script>
  15.    
  16.     <script src="../build/jquery.js"></script>
  17.    
  18.     <script src="../src/js/me-namespace.js" type="text/javascript"></script>
  19.     <script src="../src/js/me-utility.js" type="text/javascript"></script>
  20.     <script src="../src/js/me-i18n.js" type="text/javascript"></script>
  21.     <script src="../src/js/me-plugindetector.js" type="text/javascript"></script>
  22.     <script src="../src/js/me-featuredetection.js" type="text/javascript"></script>
  23.     <script src="../src/js/me-mediaelements.js" type="text/javascript"></script>
  24.     <script src="../src/js/me-shim.js" type="text/javascript"></script>
  25.    
  26.     <script src="../src/js/mep-library.js" type="text/javascript"></script>
  27.     <script src="../src/js/mep-player.js" type="text/javascript"></script>
  28.     <script src="../src/js/mep-feature-playpause.js" type="text/javascript"></script>
  29.     <script src="../src/js/mep-feature-progress.js" type="text/javascript"></script>
  30.     <script src="../src/js/mep-feature-time.js" type="text/javascript"></script>
  31.     <script src="../src/js/mep-feature-speed.js" type="text/javascript"></script>  
  32.     <script src="../src/js/mep-feature-tracks.js" type="text/javascript"></script>
  33.     <script src="../src/js/mep-feature-volume.js" type="text/javascript"></script>
  34.     <script src="../src/js/mep-feature-stop.js" type="text/javascript"></script>
  35.     <script src="../src/js/mep-feature-fullscreen.js" type="text/javascript"></script>
  36.     <link rel="stylesheet" href="../src/css/mediaelementplayer.css" />
  37.     <link rel="stylesheet" href="../src/css/mejs-skins.css" /> 
  38.        
  39.     <style>
  40.     #container{
  41.         width: 700px;
  42.         margin: 20px auto;
  43.     }
  44.    
  45.     #video-container {
  46.         -sdisplay: none;
  47.        
  48.     }
  49.     </style>
  50. </head>
  51. <body>
  52.  
  53. <div id="container">
  54.  
  55. <form>
  56.  
  57.  
  58.  
  59. <span id="audio-mode"></span>
  60.  
  61. <h2>Emilie Voe Nereng NEW 2013 (Pictures)</h2>
  62.  
  63. <h5>Made by Elthandorr using JavaScript</h5>
  64.  
  65.  
  66.  
  67. <div id="video-container">
  68.  
  69.     <video width="640" height="360" id="player1" controls="controls" preload="none" poster="../media/test.jpg">
  70.    
  71.         <source src="../media/test.mp4"  type="video/mp4" />    
  72.            
  73.         <track kind="subtitles" src="../media/mediaelement.srt" srclang="en"  ></track>
  74.        
  75.     </video>
  76.  
  77. </div>
  78.  
  79. <input id="showit" type="button" value="show it"  /><br>
  80.  
  81. <script>
  82. $('#showit').on('click', function() {
  83.     if ($('#video-container').is(':visible')) {
  84.         $('#video-container').hide();
  85.     } else {
  86.         $('#video-container').show();
  87.     }
  88.    
  89.     $('#player1')[0].player.setControlsSize();
  90. });
  91. </script>
  92.  
  93.  
  94. <span id="video-mode"></span>
  95. <div style="min-height: 400px">
  96. <div id="video-events"></div>
  97. <div id="video-props"></div>
  98. </div>
  99.  
  100.  
  101.  
  102. <br>
  103.  
  104.  
  105.  
  106. </form>
  107.  
  108. </div>
  109.  
  110.  
  111. <script>
  112. function appendMediaEvents($node, media) {
  113.     var
  114.         mediaEventNames = 'loadstart progress suspend abort error emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange'.split(' ');
  115.         mediaEventTable = $('<table class="media-events"><caption>Media Events</caption><tbody></tbody></table>').appendTo($node).find('tbody'),
  116.         tr = null,
  117.         th = null,
  118.         td = null,
  119.         eventName = null,
  120.         il = 0,            
  121.         i=0;
  122.        
  123.     for (il = mediaEventNames.length;i<il;i++) {
  124.         eventName = mediaEventNames[i];
  125.         th = $('<th>' + eventName + '</th>');
  126.         td = $('<td id="e_' + media.id + '_' + eventName + '" class="not-fired">0</td>');
  127.                    
  128.         if (tr == null)
  129.             tr = $("<tr/>");
  130.            
  131.         tr.append(th);
  132.         tr.append(td);
  133.  
  134.         if ((i+1) % 5 == 0) {
  135.             mediaEventTable.append(tr);
  136.             tr = null;
  137.         }      
  138.        
  139.         // listen for event
  140.         media.addEventListener(eventName, function(e) {
  141.            
  142.             var notice = $('#e_' + media.id + '_' + e.type),
  143.                 number = parseInt(notice.html(), 10);
  144.            
  145.             notice
  146.                 .html(number+1)
  147.                 .attr('class','fired');
  148.         }, true);
  149.     }  
  150.    
  151.     mediaEventTable.append(tr);
  152. }
  153.  
  154. function appendMediaProperties($node, media) {
  155.     var /* src currentSrc  */
  156.         mediaPropertyNames = 'error currentSrc networkState preload buffered bufferedBytes bufferedTime readyState seeking currentTime initialTime duration startOffsetTime paused defaultPlaybackRate playbackRate played seekable ended autoplay loop controls volume muted'.split(' '),
  157.         mediaPropertyTable = $('<table class="media-properties"><caption>Media Properties</caption><tbody></tbody></table>').appendTo($node).find('tbody'),
  158.         tr = null,
  159.         th = null,
  160.         td = null,
  161.         propName = null,   
  162.         il = 0,    
  163.         i=0;
  164.        
  165.     for (il = mediaPropertyNames.length; i<il; i++) {
  166.         propName = mediaPropertyNames[i];
  167.         th = $('<th>' + propName + '</th>');
  168.         td = $('<td id="p_' + media.id + '_' + propName + '" class=""></td>');
  169.                    
  170.         if (tr == null)
  171.             tr = $("<tr/>");
  172.            
  173.         tr.append(th);
  174.         tr.append(td);
  175.  
  176.         if ((i+1) % 3 == 0) {
  177.             mediaPropertyTable.append(tr);
  178.             tr = null;
  179.         }
  180.     }  
  181.    
  182.     setInterval(function() {
  183.         var
  184.             propName = '',
  185.             val = null,
  186.             td = null;
  187.        
  188.         for (i = 0, il = mediaPropertyNames.length; i<il; i++) {
  189.             propName = mediaPropertyNames[i];
  190.             td = $('#p_' + media.id + '_' + propName);
  191.             val = media[propName];
  192.             val =
  193.                 (typeof val == 'undefined') ?
  194.                 'undefined' : (val == null) ? 'null' : val.toString();
  195.             td.html(val);
  196.         }
  197.     }, 500);   
  198.    
  199. }
  200.  
  201. </script>
  202.  
  203.  
  204. <script  type="text/javascript">
  205. $('audio, video').bind('error', function(e) {
  206.  
  207.     //console.log('error',this, e, this.src, this.error.code);
  208. });
  209.  
  210. jQuery(document).ready(function() {
  211.     $('audio, video').mediaelementplayer({
  212.         //mode: 'shim',
  213.    
  214.         pluginPath:'../build/',
  215.         enablePluginSmoothing:true,
  216.         //duration: 489,
  217.         //startVolume: 0.4,
  218.         enablePluginDebug: true,
  219.         //iPadUseNativeControls: true,
  220.         //mode: 'shim',
  221.         //forcePluginFullScreen: true,
  222.         //usePluginFullScreen: true,
  223.         //mode: 'native',
  224.         //plugins: ['silverlight'],
  225.         //features: ['playpause','progress','volume','speed','fullscreen'],
  226.         success: function(me,node) {
  227.             // report type
  228.             var tagName = node.tagName.toLowerCase();
  229.             $('#' + tagName + '-mode').html( me.pluginType  + ': success' + ', touch: ' + mejs.MediaFeatures.hasTouch);
  230.  
  231.            
  232.             if (tagName == 'audio') {
  233.  
  234.                 me.addEventListener('progress',function(e) {
  235.                     //console.log(e);
  236.                 }, false);
  237.            
  238.             }
  239.            
  240.             me.addEventListener('progress',function(e) {
  241.                 //console.log(e);
  242.             }, false);
  243.    
  244.            
  245.             // add events
  246.             if (tagName == 'video' && node.id == 'player1') {
  247.                 appendMediaProperties($('#' + tagName + '-props'), me);
  248.                 appendMediaEvents($('#' + tagName + '-events'), me);
  249.                
  250.             }
  251.         }      
  252.     });
  253.    
  254.  
  255.  
  256. });
  257.  
  258. </script>
  259.  
  260.  
  261. </body>
  262. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!