Home | History | Annotate | Download | only in media 
      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>
    133