search

videojs / video.js

Video.js - open source HTML5 video player
https://videojs.com
Other
38.08k stars 7.45k forks source link

VideoJS ruins web sound on iOS #1717

Closed galinawind closed 9 years ago

galinawind commented 9 years ago

VideoJS 4.10.2 (and older versions) clobbers sound on website on iOS. I have a complete example. All you have to do is push the button to play sound, then add the video and push "play" on the video. When the video stops playing there will be no audio at all. If the "play" button on the video itself is not pushed, the audio will play fine without any issues. VideoJS does not seem to release the audio stream once the playback is completed. On iPad 2 the audio does not play at all, on iPad Air the audio stutters and struggles, but does kind of sort of play after the video has finished. Either way is bad. Removing the video from the page does not help.

The only way to make this demo work properly is to play the video and then hit "reload" in the browser. That behavior of course is completely unacceptable.

There does not seem to be any way to actually attach the self-contained example, so please e-mail me for the tar ball of the source code.

mmcc commented 9 years ago

I responded to this on the issue you opened on the Videojs.com, but particularly on iOS, Video.js has absolutely nothing to do with playback since the native player takes over. I'd be happy to take a look at the complete example, but I seriously, seriously doubt that this is related to Video.js.

Would you mind setting up a reduced test case on something like JSBin?

galinawind commented 9 years ago

It is as reduced as it gets and I have no idea how to put it into JSBin. I looked at JSBin. I am not a web programmer and I have no idea how to split the whole thing up. Also, there is no way to load the HTML5 audio library I'm using. When I say self-contained, it is. If you load, but don't touch the video, everything is fine. As soon as you hit the "play" button in the video itself, all hell breaks loose. This is a strictly iOS issue that manifests in iPad Safari as all other browsers on all other operating systems do not have this issue. Of course non-mobile browsers don't have an issue with having concurrent active audio streams...

Date: Thu, 4 Dec 2014 21:13:49 -0800 From: notifications@github.com To: video.js@noreply.github.com CC: galinawind@hotmail.com Subject: Re: [video.js] VideoJS ruins web sound on iOS (#1717)

I responded to this on the issue you opened on the Videojs.com, but particularly on iOS, Video.js has absolutely nothing to do with playback since the native player takes over. I'd be happy to take a look at the complete example, but I seriously, seriously doubt that this is related to Video.js.

Would you mind setting up a reduced test case on something like JSBin?

— Reply to this email directly or view it on GitHub.

                  =
gkatsev commented 9 years ago

Try putting all the code up on http://gist.github.com

galinawind commented 9 years ago

https://gist.github.com/anonymous/c564528ef81787245dea

This gist website will not let me add the source video/audio files… so it's not very helpful. There is absolutely nothing to the code. It's all in the theater.html file, all 84 lines of it.

mmcc commented 9 years ago

So just to reiterate, Video.js has nothing to do with playback on iOS, so I highly doubt Video.js is at fault here. Have you tried this with a vanilla video element?

mmcc commented 9 years ago

You need a code fence. Use 3 back ticks around your code (for the example).

mmcc commented 9 years ago

Ok so working under the assumption this is a library issue, why are you assuming Howler.js isn't at fault?

galinawind commented 9 years ago

Thanks. This works fine, no libraries, just regular HTML5. 

<html>
<body>

<video width="560" height="420" controls>
  <source src="small.mp4" type="video/mp4">
  <source src="small.webm" type="video/webm">
Your browser does not support the video tag.
</video> 

 <audio controls>
  <source src="Rayman_2_music_sample.ogg" type="audio/ogg">
  <source src="2240.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>

</body>
</html>
mmcc commented 9 years ago

I'm still not sure what's going on, but just to reiterate one last time, Video.js does not handle the actual playback on iOS. At all. There's a lot going on in your example, but for us to help debug we really need an actual reduced test case that we can interact with.

galinawind commented 9 years ago

so how am I supposed to stick the media into all your code pens and such? It's all text only.

Date: Fri, 5 Dec 2014 12:02:44 -0800 From: notifications@github.com To: video.js@noreply.github.com CC: galinawind@hotmail.com Subject: Re: [video.js] VideoJS ruins web sound on iOS (#1717)

I'm still not sure what's going on, but just to reiterate one last time, Video.js does not handle the actual playback on iOS. At all. There's a lot going on in your example, but for us to help debug we really need an actual reduced test case that we can interact with.

— Reply to this email directly or view it on GitHub.

                  =
mmcc commented 9 years ago

Can you upload the files somewhere such as Dropbox? cloudup? S3? Any service that allows you to host files will be fine. 

— Sent from mobile

On Fri, Dec 5, 2014 at 12:09 PM, galinawind notifications@github.com wrote:

so how am I supposed to stick the media into all your code pens and such? It's all text only. Date: Fri, 5 Dec 2014 12:02:44 -0800 From: notifications@github.com To: video.js@noreply.github.com CC: galinawind@hotmail.com Subject: Re: [video.js] VideoJS ruins web sound on iOS (#1717) I'm still not sure what's going on, but just to reiterate one last time, Video.js does not handle the actual playback on iOS. At all. There's a lot going on in your example, but for us to help debug we really need an actual reduced test case that we can interact with. — Reply to this email directly or view it on GitHub.

                =

Reply to this email directly or view it on GitHub: https://github.com/videojs/video.js/issues/1717#issuecomment-65847059

galinawind commented 9 years ago

Sure. https://www.dropbox.com/s/r5a8qmg0xnbnsi9/itScreensStyler_new.zip?dl=0

mmcc commented 9 years ago

Before I dig into that zip, have you checked to see if things work without howler.js involved?

— Sent from mobile

On Fri, Dec 5, 2014 at 12:14 PM, galinawind notifications@github.com wrote:

Sure. https://www.dropbox.com/s/r5a8qmg0xnbnsi9/itScreensStyler_new.zip?dl=0

Reply to this email directly or view it on GitHub: https://github.com/videojs/video.js/issues/1717#issuecomment-65847737

mmcc commented 9 years ago

I put the example online, but I can't reproduce the issue. The longer Rayman audio is ogg, which means it won't play back on iOS, forcing the audio to fallback to the much shorter, not-so-cool-to-blast-out-loud-at-work, mp3 file. The video plays back fine with no audio issues, though.

galinawind commented 9 years ago

There is no issue with playback of video. I will repeat the sequence of operations here again. You arrive to the page. You play the audio first. It plays fine. Then you play the video. It plays fine. Then you try to play the audio again and it will not play after the video had been played. The video playback mucks up all subsequent audio. As you are testing you can not just hit reload because if you hit reload the issue disappears. You have to reset your browser every time to simulate first arrival to the website. The user will be arriving to the website, then playing educational videos, then taking quizzes and earning games. If the user never touches video, everything is fine. If the user plays the videos there will be no sound on the rest of the site.

mmcc commented 9 years ago

Switching between audio and video sources works just fine. I'm not saying this is necessarily a Howler.js issue, but this is not a Video.js issue. If there's some negative interaction going on between the two libraries, that's unfortunate, but it's not something we're going to look into.

galinawind commented 9 years ago

On the web site in development the audio and video sources are not in the same player. Not only they are not in the same player, but we are using Web Audio extensively because of a large pre-existing code base that was not designed to use a video player to play audio. This is not helpful. There is background sound in a game. If you play the video before going to that game, there will be no sound if you are on iOS. This issue is not closed.

Date: Fri, 5 Dec 2014 13:21:47 -0800 From: notifications@github.com To: video.js@noreply.github.com CC: galinawind@hotmail.com Subject: Re: [video.js] VideoJS ruins web sound on iOS (#1717)

Switching between audio and video sources works just fine. I'm not saying this is necessarily a Howler.js issue, but this is not a Video.js issue. If there's some negative interaction going on between the two libraries, that's unfortunate, but it's not something we're going to look into.

— Reply to this email directly or view it on GitHub.

                  =
mmcc commented 9 years ago

Ok, then here's an example using the web audio api separately. This issue is closed.

galinawind commented 9 years ago

Thank you very much for your help. This indicates that this is a Howler.js issue. We have separately in our own testing here encountered that Howler is having issues when just used together with a simple HTML5 video tag. This issue is now closed.

Date: Fri, 5 Dec 2014 17:22:38 -0800 From: notifications@github.com To: video.js@noreply.github.com CC: galinawind@hotmail.com Subject: Re: [video.js] VideoJS ruins web sound on iOS (#1717)

Ok, then here's an example using the web audio api separately. This issue is closed.

— Reply to this email directly or view it on GitHub.

                  =
mmcc commented 9 years ago

@galinawind Happy I could help! However, for the sake of other open source project maintainers, I feel I should mention that you should (please, please) remove other variables before opening issues.

Have you tried this with a vanilla video element?

why are you assuming Howler.js isn't at fault?

Before I dig into that zip, have you checked to see if things work without howler.js involved?

I asked 3 separate times during the conversation if you were certain that Howler.js wasn't the issue...Again, glad I was able to help, but keep in mind that Github issues are for tracking issues, not general development support. This is a free, open source project :)

Good luck!