Support Audio

[heff]

Video.js isn't meant to support audio yet, but there's been a number of requests for it, and we have progress on support for mp3s in the swf.

I'm creating this issue to consolidate and point to audio issues/requests.
#533 (Tom has made some progress in a branch)
#534

[tim-peterson]

I added a plugin to the video-js plugins list where I used the <audio> tag to play audio. This plugin also allows for an video playlist. The <audio> tag is needed because on webkit mobile browsers the <video> tag always goes fullscreen which is not the desired behavior for audio.

Here's a demo.

[heff]

Wow, that's pretty awesome. Nice job.

[tim-peterson]

Pull request #616 addresses using the <audio> tag with video.js. I demo it here. Surprisingly, virtually no changes are needed in swapping the <video> for an <audio> tag as long as the src files exist. If one uses the <audio> tag, there are only 2 small issues which are solved by this pull-request:

1. vjs custom controls don't appear on IOS or Android. I added the following snippet after line 31 of player.js to address that:

 if(this.tag.tagName=="AUDIO") this.controls_ = true; 

1. Clicking the .vjs-poster only plays and does not pause the audio unlike with the video tag. Also the poster disappears on play. Adding the following below line 84 of video-js.css and line 34 of poster.js fixes this issue:

line 84 of video-js.css:

audio + div + .vjs-poster{
  display:block !important;
}

Line 34 of poster.js:

  if (this.player_.paused()) {
    this.player_.play();
  } else {
    this.player_.pause();
  } 

As a sidenote, this pull request solves an equally pressing issue, #518. Namely, it inserts/removes the spinner upon the various events rather than simply show/hiding it. Setting the display property has no effect on the disasterous, inevitable outcome of the spinner maxing out one's CPU. This must be an issue with how browsers (webkit and firefox) currently handle CSStransform: rotate(), but since we don't know the timeline for that being fixed it is better to just get rid of the spinner and add it back when needed.

---

Again, here's the DEMO: http://tim-peterson.github.io/videojs-playlist/

[thijstriemstra]

Any update on this? Will video.js support audio or should I write a plugin?

[heff]

There's no one working on this at the moment, so if you want to try a plugin that'd be great.

I know @tim-peterson has done some work with audio in his plugin. https://github.com/tim-peterson/videojs-playlist

[thijstriemstra]

Ok. My idea is to create a player that uses wavesurfer.js (https://github.com/katspaugh/wavesurfer.js) to visualize the audio data combined with video.js's API and controls. Maybe ill get to the point where I can write some tests and contribute it back, otherwise it'll just go onto the wiki.

[heff]

That sounds cool. Post a link here when you have something.

[martindale]

@thijstriemstra any progress on your wavesurfer.js integration? I'd love to take a look.

[mmcc]

@thijstriemstra @martindale +1 to that. Any progress on this one? If so, we need to put a link on the wiki :)

[cdekok]

Yes please would like to see this feature too :) if this changes work can it be merged?

[mmcc]

I put together a simple PR that would allow <audio> tags to work (mostly) the same way as <video> tags. The differences are that the control bar and poster would stay active the whole time since, you know, there's no video to watch. The Flash fallback wouldn't work (at first), but this should at least be a start (and between mp3 and opus, browser support is actually quite solid).

[thijstriemstra]

I put the videojs wavesurfer plugin on github at https://github.com/collab-project/videojs-wavesurfer. It's tested with videojs 4.3 and an early version of wavesurfer.js. wavesurfer.js has a few bugs related to the finish and progress event but perhaps others here can help with that as well. There are no changes made to the videojs source but people with more knowledge of videojs might be able to tweak that so it better behaves with audio files, the plugin basically renders the waveform and tweaks the videojs UI so it makes more sense for an audio playback scenario.

[mmcc]

Cool! Added it to the wiki.

[mmcc]

#1540 was merged yesterday, so now audio elements should work for the most part. Work still needs to be done in the Flash fallback to allow IE8 to join the party, so I wouldn't call this completely finished yet, but this gets us pretty far.

[gkatsev]

@mmcc I'm 100% ok with not supporting IE8 for the audio-player and then calling this done. Thoughts?

[mmcc]

Sounds good to me!

—
Sent from mobile

On Tue, Nov 10, 2015 at 2:31 PM, Gary Katsevman notifications@github.com
wrote:

@mmcc I'm 100% ok with not supporting IE8 for the audio-player and then calling this done. Thoughts?

Reply to this email directly or view it on GitHub:
#537 (comment)

[gkatsev]

Closing as done. If someone PRs changes needed for flash/IE8 and the audio player, we'll accept it but unlikely to built it out ourselves.