@mmcc added support for audio tags (html5 audio only). closes #1540

CHANGELOG.md

@@ -16,6 +16,7 @@ CHANGELOG
 * @twentyrogersc fixed the return value when setting the poster source ([view](https://github.com/videojs/video.js/pull/1552))
 * @heff updated to swf v4.5.0 to fix event issues ([view](https://github.com/videojs/video.js/pull/1554))
 * @rpless made the VolumeMenuButton volume more accesible via tab navigation ([view](https://github.com/videojs/video.js/pull/1519))
+* @mmcc added support for audio tags (html5 audio only) ([view](https://github.com/videojs/video.js/pull/1540))
 
 --------------------
 

src/css/video-js.less

@@ -201,6 +201,12 @@ The default control bar that is a container for most of the controls.
   display: none;
 }
 
+/* Don't hide the control bar if it's audio */
+.vjs-audio.vjs-default-skin.vjs-has-started.vjs-user-inactive.vjs-playing .vjs-control-bar {
+  opacity: 1;
+  visibility: visible;
+}
+
 /* IE8 is flakey with fonts, and you have to change the actual content to force
 fonts to show/hide properly.
   - "\9" IE8 hack didn't work for this
@@ -223,7 +229,7 @@ fonts to show/hide properly.
   width: 4em;
 }
 
-/* FontAwsome button icons */
+/* Font button icons */
 .vjs-default-skin .vjs-control:before {
   font-family: VideoJS;
   font-size: 1.5em;

src/js/player.js

@@ -67,6 +67,9 @@ vjs.Player = vjs.Component.extend({
     // see enableTouchActivity in Component
     options.reportTouchActivity = false;
 
+    // Set isAudio based on whether or not an audio tag was used
+    this.isAudio(this.tag.nodeName.toLowerCase() === 'audio');
+
     // Run base component initializing with new options.
     // Builds the element through createEl()
     // Inits and embeds any child components in opts
@@ -80,6 +83,10 @@ vjs.Player = vjs.Component.extend({
       this.addClass('vjs-controls-disabled');
     }
 
+    if (this.isAudio()) {
+      this.addClass('vjs-audio');
+    }
+
     // TODO: Make this smarter. Toggle user state between touching/mousing
     // using events, since devices can have both touch and mouse events.
     // if (vjs.TOUCH_ENABLED) {
@@ -1569,6 +1576,16 @@ vjs.Player.prototype.playbackRate = function(rate) {
 
 };
 
+vjs.Player.prototype.isAudio_ = false;
+vjs.Player.prototype.isAudio = function(bool) {
+  if (bool !== undefined) {
+    this.isAudio_ = !!bool;
+    return this;
+  }
+
+  return this.isAudio_;
+};
+
 // Methods to add support for
 // networkState: function(){ return this.techCall('networkState'); },
 // readyState: function(){ return this.techCall('readyState'); },

src/js/poster.js

@@ -24,7 +24,9 @@ vjs.PosterImage = vjs.Button.extend({
       this.src(player.poster());
     }));
 
-    player.on('play', vjs.bind(this, this.hide));
+    if (!player.isAudio()) {
+      player.on('play', vjs.bind(this, this.hide));
+    }
   }
 });
 

src/js/setup.js

@@ -5,28 +5,48 @@
 
 // Automatically set up any tags that have a data-setup attribute
 vjs.autoSetup = function(){
-  var options, vid, player,
+  var options, mediaEl, player, i, e;
-      vids = document.getElementsByTagName('video');
+
+  // One day, when we stop supporting IE8, go back to this, but in the meantime...*hack hack hack*
+  // var vids = Array.prototype.slice.call(document.getElementsByTagName('video'));
+  // var audios = Array.prototype.slice.call(document.getElementsByTagName('audio'));
+  // var mediaEls = vids.concat(audios);
+
+  // Because IE8 doesn't support calling slice on a node list, we need to loop through each list of elements
+  // to build up a new, combined list of elements.
+  var vids = document.getElementsByTagName('video');
+  var audios = document.getElementsByTagName('audio');
+  var mediaEls = [];
+  if (vids && vids.length > 0) {
+    for(i=0, e=vids.length; i<e; i++) {
+      mediaEls.push(vids[i]);
+    }
+  }
+  if (audios && audios.length > 0) {
+    for(i=0, e=audios.length; i<e; i++) {
+      mediaEls.push(audios[i]);
+    }
+  }
 
   // Check if any media elements exist
-  if (vids && vids.length > 0) {
+  if (mediaEls && mediaEls.length > 0) {
 
-    for (var i=0,j=vids.length; i<j; i++) {
+    for (i=0,e=mediaEls.length; i<e; i++) {
-      vid = vids[i];
+      mediaEl = mediaEls[i];
 
       // Check if element exists, has getAttribute func.
       // IE seems to consider typeof el.getAttribute == 'object' instead of 'function' like expected, at least when loading the player immediately.
-      if (vid && vid.getAttribute) {
+      if (mediaEl && mediaEl.getAttribute) {
 
         // Make sure this player hasn't already been set up.
-        if (vid['player'] === undefined) {
+        if (mediaEl['player'] === undefined) {
-          options = vid.getAttribute('data-setup');
+          options = mediaEl.getAttribute('data-setup');
 
           // Check if data-setup attr exists.
           // We only auto-setup if they've added the data-setup attr.
           if (options !== null) {
             // Create new video.js instance.
-            player = videojs(vid);
+            player = videojs(mediaEl);
           }
         }
 

test/unit/player.js

@@ -211,8 +211,6 @@ test('should set and update the poster value', function(){
   ok(pcEmitted, 'posterchange event was emitted');
   equal(player.poster(), updatedPoster, 'the updated poster is returned');
 
-  equal(player.poster(poster), player, 'the player is returned when setting a poster');
-
   player.dispose();
 });
 
@@ -648,3 +646,11 @@ test('pause is not called if the player is paused and ended is fired', function(
   player.trigger('ended');
   equal(pauses, 0, 'pause was not called when ended fired');
 });
+
+test('should add an audio class if an audio el is used', function() {
+  var audio = document.createElement('audio'),
+      player = PlayerTest.makePlayer({}, audio),
+      audioClass = 'vjs-audio';
+
+  ok(player.el().className.indexOf(audioClass) !== -1, 'added '+ audioClass +' css class');
+});

test/unit/poster.js

@@ -36,3 +36,14 @@ test('should update the poster source', function(){
 
   player.dispose();
 });
+
+test('should not hide the poster if audio track is used', function() {
+  var audio = document.createElement('audio'),
+      poster = 'http://example.com/poster.jpg',
+      player = PlayerTest.makePlayer({ 'poster': poster, 'controls': true }, audio),
+      posterImage = new vjs.PosterImage(player),
+      posterEl = posterImage.el();
+
+  player.trigger('play');
+  equal(posterEl.style.display, '', 'poster image is not hidden when audio track is used');
+});