src/cobalt/demos/content/media-element-demo/loop-playback.js

// Copyright 2018 The Cobalt Authors. All Rights Reserved.
//
// Licensed under the Apache License, Version 2.0 (the "License");
// you may not use this file except in compliance with the License.
// You may obtain a copy of the License at
//
//     http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS,
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
// See the License for the specific language governing permissions and
// limitations under the License.

// The page simply plays an audio or a video stream in a loop, it can be used
// in the following forms:
//   loop-playback.html?url=video.mp4&type=progressive
//   loop-playback.html?url=video.webm&type=video
//   loop-playback.html?url=audio.mp4&type=audio
// If the stream is adaptive, it has to be fit in memory as this demo will
// download the whole stream at once.

var video = null;
var url = null;
var type = null;

function downloadAndAppend(source_buffer, callback) {
  var xhr = new XMLHttpRequest;
  xhr.open('GET', url, true);
  xhr.responseType = 'arraybuffer';
  xhr.addEventListener('load', function(e) {
    var onupdateend = function() {
      source_buffer.removeEventListener('updateend', onupdateend);
      callback();
    };
    source_buffer.addEventListener('updateend', onupdateend);
    source_buffer.appendBuffer(new Uint8Array(e.target.response));
  });
  xhr.send();
}

function createVideoElement() {
  var video = document.createElement('video');
  video.autoplay = true;
  video.style.width = '1280px';
  video.style.height = '720px';
  document.body.appendChild(video);

  return video;
}

function onVideoEnded() {
  console.log('playback ended');
  startNextVideo();
}

function startProgressiveVideo() {
  video.src = '';
  video.load();
  video.src = url;
  video.addEventListener('ended', onVideoEnded.bind());
}

function startAdaptiveVideo() {
  video.src = '';
  video.load();
  var mediasource = new MediaSource;
  mediasource.addEventListener('sourceopen', function () {
    var source_buffer;
    if (type == "audio") {
      if (url.indexOf(".mp4") != -1) {
        source_buffer = mediasource.addSourceBuffer('audio/mp4; codecs="mp4a.40.2"');
      } else if (url.indexOf(".webm") != -1) {
        source_buffer = mediasource.addSourceBuffer('audio/webm; codecs="opus"');
      } else {
        throw "unknown audio format " + url;
      }
    } else {
      if (url.indexOf(".mp4") != -1) {
        source_buffer = mediasource.addSourceBuffer('video/mp4; codecs="avc1.640028"');
      } else if (url.indexOf(".webm") != -1) {
        source_buffer = mediasource.addSourceBuffer('video/webm; codecs="vp9"');
      } else {
        throw "unknown video format " + url;
      }
    }
    downloadAndAppend(source_buffer, function () {
      mediasource.endOfStream();
    });
  })

  video.src = window.URL.createObjectURL(mediasource);
  video.addEventListener('ended', onVideoEnded);
}

function startNextVideo() {
  if (type == "progressive") {
    startProgressiveVideo();
  } else {
    startAdaptiveVideo();
  }
}

function main() {
  var get_parameters = window.location.search.substr(1).split('&');
  for (var param of get_parameters) {
    splitted = param.split('=');
    if (splitted[0] == 'url') {
      url = splitted[1];
    } else if (splitted[0] == 'type') {
      type = splitted[1];
    }
  }

  if (!url) {
    throw "url is not set.";
  }

  if (type != 'progressive' && type != 'audio' && type != 'video') {
    throw "invalid type " + type;
  }

  video = createVideoElement();
  startNextVideo();
}

main();