I am working on a website which gives users the option to have the pages read aloud to them.
I am using SoundJS (https://www.createjs.com/soundjs) to load in an OGG, MP3, and WAV version of a narration file, and then play it as soon as it finishes loading. Here is the code:
var narration = {
path: '../assets/sounds/',
manifest: [
{
id: 'narration',
src: {
mp3: 'narration.mp3',
ogg: 'narration.ogg',
wav: 'narration.wav'
}
}
]
};
createjs.Sound.alternateExtensions = ['mp3', 'wav'];
createjs.Sound.registerSounds(narration);
createjs.Sound.addEventListener('fileload', function(){
createjs.Sound.play('narration');
});
On the iPhone X and iPad, in Safari and Chrome, the audio file starts playing, but then cuts out before it finishes. The audio files on the site range from 7 to over 30 seconds, and the audio always cuts out a few seconds before the end. For instance, in Chrome, a 10 second clip stops playing after 8 seconds, and a 31 second clip stops playing after 29. In Safari, the same 10 second clip stops after 7 seconds, and the same 31 second clip stops after 22.
On all non-iOS devices we've tested, in many different browsers, this issue has never occurred.
What is the reason behind this, and what can I do to ensure the audio plays all the way through?
As long as there is no solution found for this issue, we're considering it a bug with iOS mobile devices, and not something we can control.
As a workaround, we've implemented a button on each page that the user must click before the audio plays. The button runs createjs.Sound.play('narration'), rather than it being triggered through the fileload event listener. For some reason, registering a click on each page before attempting to play audio allows it to play all the way through, reliably.
Have you tried using the HTML5 audio element? Simply add it as an element that appears over the Canvas. I added an audio element, "", and it seems to work well in my iPad
Related
Environments
iOS 14.4.2 (safari)
chrome 91.4472.80
As I was trying to find a way to prevent my iPhone going to sleep while a browser page is opened, I found 3 ways.
use Screen Wake Lock API
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Wake_Lock_API
call window.location.href periodically and stop it
play a video with a user interaction
For #1, this doesn't work on iPhone, should work on Android.
#2, didn't seem to work on either safari or chrome on iPhone.
#3, also didn't work (even playing a video after user interaction).
I tried https://github.com/richtr/NoSleep.js/ but didn't prevent from sleeping.
I also tried https://github.com/roldanjr/use-stay-awake and it opened a blank video in fullscreen (this maybe fixed by just adding https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video#attr-playsinline)
Then, I noticed browser version of Youtube preventing my phone from sleeping while it's playing a video (I set my sleep time for 30 seconds, and it can play a 10 min video without turning itself off).
Does anyone know what kind of technics they are using to do that?
I have an Angular 5 app.
I have the same video element (tiny video of 10 seconds at the server root for testing), with the same source on my route 1 and on my route 2.
I can't make things work properly.
Here's my HTML video element :
<video width="400" controls>
<source src="test.mp4" type="video/mp4"> Your browser does not support HTML5 video.
</video>
Can't do easier, right ?
When I visit for the first time my webapp, on my first route loaded (either route 1 or route 2, I tried both), all caches clean, my video doesn't have cover. When I click on play :
In the best case, the video is playing for a 2 seconds and then, the image freeze, sound is cut, the playing seeker goes at the end of video time. The end screen is green.
OR
Most of the time, the video is not playing
If I navigate to my other route, video is not playing when I click on play. If I refresh my page, same action same result.
I tried to use a basic HTML page with just the same video tag. My video is playing as expected. At the first visit, and when I refresh. So, I assume that I don't have the byte-range requests issue.
It's working as expected in all others platforms tested (Safari/ Chrome macOS, Chrome iOS, Chrome Android).
Issue is encoutered on iPad Mini 4 with iOS 11.3.
I read a lot of things about Safari iOS issues with HTML5 video. I tried to apply several fixes without success, but anyway, posts readed don't really have the exact same problem : in their case, video wasn't playing at all.
Moreover, it's working with the same code outside Angular, so I guess it's not that problem is not about my video tag.
Videos with the yellow mark continue to crash at that yellow mark. Here's an example.
http://youtu.be/1U5uheub2mo
That will crash my computer each time at 10 seconds when it reaches that yellow 10 second mark.
I tried playing other videos that didn't happen to have the crash marker, and they play all the way through.
I found a different one with the same yellow marker at 10 seconds and the different video crashed.
You should turn Html5 ON, probably it stops from crashing.
Enter here http://www.youtube.com/html5
And click on "Join Html5 Test" something like this.
Then when you see a video, the html5 function automatically will do the trick instead of using adobe flash player.
Ps: it don't work to ALL of videos, some videos don't have the html5 option, that will be played with adobe flash player instead.
I'm not sure what the problem is. I have a video that I'd like to play in a modal dialog.
I have everything set up and working fine on all devices. The only issue that I've been unable to overcome is that the video will not play a second time on iOS devices.
http://c4sandbox.com/video/index.html is a simple demonstration of the problem that I'm having. If you close the dialog (it will auto close when the video ends) then click the 'show again' link on an iOS device, then the video player is just an empty black box.
What am I missing? This happens in Safari and Chrome, but only on iOS.
EDIT: The problem appears to be with video.js because a straight html5 video tag will play the video multiple times as expected. Unfortunately, I need the flash fallback so html5 only is not an option.
I'm having a similar issue. The way I am getting around it is using the player's dispose() method to kill the instance and re-injecting the HTML for the player and re-instantiating it.
Thanks #Victor! your solution works. Since there is no example code given, here is the code I used.
//Init
videoPlayer = _V_("video_post", {
controls:true,
preload:"auto",
autoplay:true,
}, function(){
});
after you're done with the player (e.g. closes the video dialog), dispose the player
videoPlayer.dispose();
Done. hope this helps.
I'm trying to create an HTML5 video player to automatically start streaming video. I searched a lot but I didn't achieve my goal.
Then I found www.filmon.com, where all videos start to play automatically on iPad.
Does anyone know how they did it? I looked at their JS files, but I cannot make mine start automatically.
Apple has specifically disabled every method and workaround to autoplay video on iPads and iPhones (the "autoplay" attribute, and Javascript solutions like triggering hidden link's "onclick" event).
I have yet to find a way to autoplay on iPads and it looks like Apple is continuing to squash all efforts to do it. They state, "In Safari on iPhone OS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, autobuffering and autoplay are disabled. No data is loaded until the user initiates it."
As a quick update I just checked out Filmon.com and the videos there no longer seem to be autoplaying on an iPad. Example: http://demand.filmon.com/distant-roads-173-cnd-ontario-ca-1 autoplays on Chrome, but not on the iPad.
I don't think that iphone or ipad play streams automatically due to high traffic.
Why don't you play it manually using script at document ready?
somewhat like this:
window.onload=function(){
var audio = document.getElementById('audio');
audio.play();
}