Fork me on GitHub

Video Support

All the legacy <audio> functionality inside a <video> tag.

Demo

There are 2 videos in webm format in this demo, you can play them using the same API.

Simple Play

currentTrack: [[ mediaPlayer.currentTrack ]]

: [[ mediaPlayer.formatTime ]]

volume: [[ mediaPlayer.volume * 100 | number:0 ]]%

[[ mediaPlayer.formatTime ]]/[[ mediaPlayer.formatDuration ]]

player status in realtime

  
    mediaPlayer = {
      playing: [[ mediaPlayer.playing ]]
      currentTrack: [[ mediaPlayer.currentTrack ]]
      tracks: [[ mediaPlayer.tracks ]]
      volume: [[ mediaPlayer.volume ]]
      formatDuration: [[ mediaPlayer.formatDuration ]]
      duration: [[ mediaPlayer.duration ]]
      currentTime: [[ mediaPlayer.currentTime ]]
      formatTime: [[ mediaPlayer.formatTime ]]
      loadPercent: [[ mediaPlayer.loadPercent ]]
    };

Code

...you can inspect aswell!

angular.module('docs')
.controller('VideoController', function ($scope) {
  $scope.videoPlaylist = [
    {
      src: 'http://video.webmfiles.org/big-buck-bunny_trailer.webm',
      type: 'video/webm'
    },
    {
      src: 'http://video.webmfiles.org/elephants-dream.webm',
      type: 'video/webm'
    }
  ];
});