content/test/data/media/mse_config_change.html

   1 <html>
   2   <head>
   3     <title>Test media source config changes.</title>
   4   </head>
   5   <body onload="runTest();">
   6     <video controls></video>
   7     <script src="media_utils.js" type="text/javascript"></script>
   8     <script src="media_source_utils.js" type="text/javascript"></script>
   9     <script src="encrypted_media_utils.js" type="text/javascript"></script>
  10     <script type="text/javascript">
  11       var runEncrypted = QueryString.runencrypted == 1;
  12       var video = document.querySelector('video');
  13       var mediaType = 'video/webm; codecs="vorbis, vp8"';
  14
  15       var MEDIA_1 = 'bear-320x240.webm';
  16       var MEDIA_2 = 'bear-640x360.webm';
  17       if (runEncrypted) {
  18         MEDIA_1 = 'bear-320x240-av-enc_av.webm';
  19         MEDIA_2 = 'bear-640x360-av-enc_av.webm';
  20       }
  21
  22       var MEDIA_1_WIDTH = 320;
  23       var MEDIA_1_HEIGHT = 240;
  24
  25       var MEDIA_2_WIDTH = 640;
  26       var MEDIA_2_HEIGHT = 360;
  27       var MEDIA_2_LENGTH = 2.75;
  28
  29       // The time in secs to append the second media source.
  30       var APPEND_TIME = 1;
  31       // DELTA is the time after APPEND_TIME where the second video dimensions
  32       // are guaranteed to take effect.
  33       var DELTA = 0.1;
  34       // Append MEDIA_2 source at APPEND_TIME, so expected total duration is:
  35       var TOTAL_DURATION = APPEND_TIME + MEDIA_2_LENGTH;
  36
  37       function appendNextSource(mediaSource) {
  38         console.log('Appending next media source at ' + APPEND_TIME + 'sec.');
  39         var xhr = new XMLHttpRequest();
  40         xhr.open("GET", MEDIA_2);
  41         xhr.responseType = 'arraybuffer';
  42         xhr.addEventListener('load', function(e) {
  43           var onUpdateEnd = function(e) {
  44             console.log('Second buffer append ended.');
  45             srcBuffer.removeEventListener('updateend', onUpdateEnd);
  46             mediaSource.endOfStream();
  47             if (!mediaSource.duration ||
  48                 Math.abs(mediaSource.duration - TOTAL_DURATION) > DELTA) {
  49               failTest('Unexpected mediaSource.duration = ' +
  50                        mediaSource.duration + ', expected duration = ' +
  51                        TOTAL_DURATION);
  52               return;
  53             }
  54             video.play();
  55           };
  56           console.log('Appending next media source at ' + APPEND_TIME + 'sec.');
  57           var srcBuffer = mediaSource.sourceBuffers[0];
  58           srcBuffer.addEventListener('updateend', onUpdateEnd);
  59           srcBuffer.timestampOffset = APPEND_TIME;
  60           srcBuffer.appendBuffer(new Uint8Array(e.target.response));
  61         });
  62         xhr.send();
  63       }
  64
  65       function onTimeUpdate() {
  66         // crbug.com/246308
  67         //checkVideoProperties();
  68
  69         // Seek to APPEND_TIME because after a seek a timeUpdate event is fired
  70         // before video width and height properties get updated.
  71         if (video.currentTime < APPEND_TIME - DELTA) {
  72           // Seek to save test execution time (about 1 secs) and to test seek
  73           // on the first buffer.
  74           video.currentTime = APPEND_TIME - DELTA;
  75         } else if (video.currentTime > APPEND_TIME + DELTA) {
  76           // Check video duration here to guarantee that second segment has been
  77           // appended and video total duration is updated.
  78           // Video duration is a float value so we check it within a range.
  79           if (!video.duration ||
  80               Math.abs(video.duration - TOTAL_DURATION) > DELTA) {
  81             failTest('Unexpected video.duration = ' + video.duration +
  82                      ', expected duration = ' + TOTAL_DURATION);
  83             return;
  84           }
  85
  86           video.removeEventListener('timeupdate', onTimeUpdate);
  87           video.removeEventListener('ended', failTest);
  88           installTitleEventHandler(video, 'ended');
  89           // Seek to save test execution time and to test seek on second buffer.
  90           video.currentTime = APPEND_TIME + MEDIA_2_LENGTH * 0.9;
  91         }
  92       }
  93
  94       function checkVideoProperties() {
  95         if (video.currentTime <= APPEND_TIME) {
  96           if (video.videoWidth != MEDIA_1_WIDTH ||
  97               video.videoHeight != MEDIA_1_HEIGHT) {
  98             logVideoDimensions();
  99             failTest('Unexpected dimensions for first video segment.');
 100             return;
 101           }
 102         } else if (video.currentTime >= APPEND_TIME + DELTA) {
 103           if (video.videoWidth != MEDIA_2_WIDTH ||
 104               video.videoHeight != MEDIA_2_HEIGHT) {
 105             logVideoDimensions();
 106             failTest('Unexpected dimensions for second video segment.');
 107             return;
 108           }
 109         }
 110       }
 111
 112       function logVideoDimensions() {
 113         console.log('video.currentTime = ' + video.currentTime +
 114                     ', video dimensions = ' + video.videoWidth + 'x' +
 115                     video.videoHeight + '.');
 116       }
 117
 118       function runTest() {
 119         video.addEventListener('timeupdate', onTimeUpdate);
 120         video.addEventListener('ended', failTest);
 121         if (runEncrypted) {
 122           loadEncryptedMedia(video, MEDIA_1, keySystem, KEY, true,
 123                              appendNextSource);
 124         } else {
 125           var mediaSource = loadMediaSource(MEDIA_1, mediaType,
 126                                             appendNextSource);
 127           video.src = window.URL.createObjectURL(mediaSource);
 128         }
 129       }
 130       </script>
 131   </body>
 132 </html>