I'm making an audio player, and found that my <audio> tag does not fire error event on MacOS Safari, when loading a webm audio file. The webm file codec is opus.
<audio id="audioPlayer"
controls
controlsList="nodownload noplaybackrate"
preload="metadata"
src="myAudioFile.webm"
type="audio/webm">
My error handing script:
const player = document.getElementById('audioPlayer')
player.addEventListener('error', function (e) {
console.log('audio error:', e)
})
player.addEventListener('loadedmetadata', function (e) {
console.log('audio loadedmetadata:', e)
})
player.addEventListener('loadeddata', function (e) {
console.log('audio loadeddata:', e)
})
On Firefox, Edge, and Chrome, the webm audio file could play.
On MacOS Safari 16.1, loadedmetadata and loadeddata event are firing. But the audio does not play, nor error event.
On iOS Safari, error event fires normally.
Question:
How could I properly get error event on MacOS Safari?
Related
I built a page to play HLS content on most platform, use HTML5 video + HLS.js by default and fallback to flash version of player(Grind Player) if MSE is not supported.
I'm trying to stop video tag from playing when user switch to another tab or another program. After reading some answers of similar questions, I used code below:
function PauseVideo() {
if (isFlashPlayerUsed) {
var isPlaying = player.getPlaying();
AddLog("player.playing: " + isPlaying);
if (isPlaying)
player.pause();
}
else {
AddLog("player.paused: " + player.paused);
if (!player.paused)
player.pause();
}
}
$(window).on("blur", function (e) {
AddLog("window.blur fired.");
PauseVideo();
});
$(window).on("focusout", function (e) {
AddLog("window.focusout fired.");
PauseVideo();
});
$(document).on("visibilityChange", function (e) {
AddLog("document.visibilityChange fired.");
if (document.visibilityState == "hidden")
PauseVideo();
});
However, I found that in Internet Explorer 11 on Windows 7, Flash version of Player is used, and window.blur fired if I clicked anything other than player itself even if it's in the same page, but didn't fire if player is on focus and I clicked another program.
How to make sure the video will always pause when the window or tab lose focus, even if flash version of player is used?
I am trying to trigger an event once a video has loaded the first frame. The code I have used works in desktop browsers that I have tested in but it does not work in mobile safari on IOS. Is there something about the code that is not supported on mobile safari or is there another solution to achieve what I want?
function loadvideo (vidsource){
var vid = document.createElement('video');
vid.src = vidsource;
alert("Video about to load"); //This works fine in mobile safari
vid.addEventListener('loadeddata', function() {
alert("Video Loaded!"); //This does not display in mobile safari
//Will do something else here
}, false);
}
On iOS, it looks like the video doesn't get loaded unless the user hits play, or if the autoplay attribute has been added (which doesn't actually appear to autoplay it).
The following should work for you:
var vid = document.createElement('video');
if (/iPad|iPhone|iPod/.test(navigator.userAgent))
vid.autoplay = true;
vid.addEventListener('loadeddata', function() {[...]}, false);
vid.src = videosource;
Alternatively, you can listen to the progress event instead of loadeddata, which seems to work fine on iOS Safari.
Add preload="metadata" to video tag and then listen to loadedmetadata event. It works in IOS Safari as well
try not to use addEventListener is this case, use older on style, AND set src AFTER you setup an event listener:
...
vid.onloadeddata = function () {
alert("Video Loaded!");
// do something
}
vid.src = vidsource;
...
If an EventListener is added to an EventTarget while it is processing an event, it will not be triggered by the current actions but may be triggered during a later stage of event flow, such as the bubbling phase. - To learn more - https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener
I am implementing background sound in phonegap android by using Media player api. It works for one or two iteration after it does not play. It throws errors like
03-15 15:20:40.838: E/MediaPlayer(6574): Error (1,-2147483648) this error comes starting only
and it plays for sometime and again stops below is the logcat errors
03-15 15:23:12.568: E/MediaPlayer(6574): error (-19, 0)
03-15 15:23:12.568: E/MediaPlayer(6574): Attempt to call getDuration without a valid mediaplayer
03-15 15:23:12.568: E/MediaPlayer(6574): error (-38, 0)
Here is the my code
pauseSound = setInterval(function() {
playAudio("/android_asset/www/sounds/nyan.wav");
}, 1000);
var my_media = null;
var mediaTimer = null;
function playAudio(url) {
// Play the audio file at url
my_media = new Media(url,function() {
// success callback
my_media.release();
});
// Play audio
my_media.play();
}
html code :
<audio controls id="myPlayer" style="display:none;">
<source id="myPlayerSource" src="#" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
javascript - jquery code :
function playAudio(url){
$("#myPlayerSource").attr("src",url);
document.getElementById('myPlayer').play()
}
check this tag in html5
HTML5 Audio
I'm working on this mobile site, where I need to play a YouTube video in Fullscreen. So far, so good. Just a YouTube embed, and voilá.
But! (Yeah, there's always a «but»)
I need to fire an event (namely, a JS function) when the video ends. I figured Safari translated the YT embed to a <video> tag, so I tried using HTML5s video events, but didn't work:
$('video').bind('ended', function () {
alert('Video has ended');
});
This fine piece of code works when using a <video> tag directly, but not when using a YT embed.
So, any ideas on how can I fire this function when the YT video has finished playing?
Thanks!
When you create your YT instance, you can provide a hash that maps events to handlers. Provide a handler for the onStateChange event, and test for the eventType that corresponds to video end ( 0 ).
new YT.Player('player', {
events: {
'onStateChange' : function ( eventType ) { if ( eventType.data == 0 ) { ... } }
}
} );
See the section of YouTube's JavaScript API for events
Sound doesn't play when I use Firefox.
If plays with IE and Safari! Here is the code:
<embed src="http://www.myWebSite.com/Play/Sound/someSound.wav" autostart="false" width="1" height="1"
id="someSound" enablejavascript="true" />
Somewhere in the JS, I have this: playSound("someSound");
function playSound(mySound) {
var snd = document.getElementById(mySound);
try {
snd.Play();
}
catch (e) {
try {
snd.DoPlay(); // Some browsers doesn't understand the Play() command
}
catch (e) {
// Do nothing if no Windows Media Player nor Quicktime installed
}
}
}
Besides, when I try some other website with embedded sound, it plays!
Why? Any clue welcome :-)
You are probably missing a Quicktime or WMP plugin for Firefox!
Firefox 3.5+ supports the <audio> tag so your could alternatively look into that.