I am very new in HTML5 player and need help. I am using the latest mediaelement.js file for the player. I am facing problem in certain cases. I have initialized the player and now want to do some work around :
Initially initialize the HTML5 mediaelement player and load all the controls but not pass the video src
Pass the video src once the live url coming wowza server is available as player.setSrc('url')
Change the video url onclick and the player to restart the video playing for the new src
How to define the provider and netconnectionurl in the player as we can define in flowplayer
Loading of player is not smooth in android tablet and also sometimes browser crashes on fullscreen
I tried to load the player initially without passing the video src but it does not load the controls only shows Download File. This is important for me as the live url comes after a delay from the server and i need to initailize the player before. Changing video url onclick seems to work for browser that supports HTML5 but in browser that uses flash fallback the video src does not change onclick. I have different channels and i want to load the channel url and play the video onclick. I don't want to pass the rtmp url with the stream url. I want to define it in the player from before and if possible change it dynamically. In android dont know why sometimes player does not load properly and browser crashes. Any help would be great.
Related
I'm posting this in case others have a similar problem.
I have a web app that uses the <audio> element. When the user clicks a button, I set the src attribute on the <audio> element to a URL of a mp3 file, then I call .load() and then .play(). The play() method's Promise resolves properly.
On the web, this works, I hear the music. On Android Chrome, the audio did not play:
The Play/Pause control showed the Pause icon (indicating the audio element thinks it's playing).
The progress on the track stayed frozen at the beginning 0:00.
If I muted the element, the track started playing.
If I just browsed to the URL of the mp3 file in Chrome, the audio loaded and I could play the song.
Anybody out there know why?
After a bunch of playing around and debugging, on a whim I finally removed some code I had planned to experiment with around audio context / graph:
const audioCtx = new AudioContext();
const sourceNode = audioCtx.createMediaElementSource(this.audioElem);
After remove these lines - the <audio> element played properly!
I'm maintaining a legacy ASP/VBScript application for some warehouse scanners. They run Android 7 with Chrome 64. I can configure Chrome however I want so I'm not constrained like a normal website would be. Due to the nature of this web application, playing a sound on page load would improve usability (when the submitted action fails). Is there any way to allow an audio file to play on page load?
I can play sounds easily after a user interaction. However, I've tried multiple methods to play a sound on page load without success:
An <audio> tag with autoplay does not play (<audio autoplay="">).
Play the sound during the load event (Audio.play()). The returned Promise fails with the error:
NotAllowedError: play() can only be initiated by a user gesture.
Create an Audio with autoplay, and append it to body during the load event.
Create an Audio, append it to body, and .play() it during the load event. Yields the same "NotAllowedError".
Whitelisting the website for sounds in Chrome.
Ensuring the media autoplay setting is set to allowed in Chrome.
Both Chrome and Firefox, have dropped support for the autoplay attribute for both audio and video unless it's a video with the sound muted.
You can read more on that here: Autoplay Policy
However, recently I found a workaround using the Howler.js library, and it seems to work quite well in just these lines of code:
let timer, sound;
sound = new Howl({
src: ['<?= get_theme_file_uri() ?>/images/spotAudio.mp3']
});
sound.play();
You can download the library and read the docs here: https://howlerjs.com/
I am using cordova 3 and building app for ios.
I'm streaming audio channel using html5 audio player. Now as it has no stop function, so I had to change the source of the player to an invalid stream address to stop player both streaming and loading.
Before this stop mechanism, when I use the pause functionality the player kept loading the stream. That unacceptable. Because I don't want the user to waste bandwidth when the player is in pause mode. So the idea worked of that invalid addres. But when I set the address the player shows
cannot play audio file
I want to show
please select a channel
Is there any way to replace this text as I want to?? I tried
document.getElementById('myaudio').text="Plese select a channel";
It's not working. Player still shows cannot play audio file
How to achive this functionality?
I am developing a mobile web app with HTML5 audio. Much has been said here and on other forums about the fact that you cannot do an auto-play on mobile devices and I worked around that by forcing the user to touch the screen just once to start the app, firing a dummy audio load on that touch, then loading and playing audio files automatically using the src parameter. This works very well and is supported even by IOS7.
An example with short audio files is at test audio. View source to see the rather simple code.
In the actual app, I want to follow this logic but I need to ensure that each audio file is completely loaded before playing it. My question is, is the preload directive issued once when the main audio object is created and thus, applies to all files that are subsequently loaded, or do I have to issue it once for every file loaded. And if the latter, is it before or after the src directive?
myaudio = new Audio();
myaudio.preload='auto';
myaudio.play();
myaudio.pause();
or
myaudio.preload='auto';
myaudio.src = "/js/crow.mp3";
myaudio.play();
or
myaudio.src = "/js/crow.mp3";
myaudio.preload='auto';
myaudio.play();
Thanks for any insight you may lend.
I want to create an audio file to play in iphone safari browser but without the help of HTML page. Just in Pure javascript or Jquery. Thanks in advance.
var audio = new Audio();
audio.id = "mySong";
audio.src = "//mysite.com/media/mysong.mp3";
Except that you can't autoplay the song in audio. You can't autoload a song on an i___ device. ...so you need to custom-build controls, which you then have to put on an HTML page, with event listeners to listen for clicks or taps, in order to play/pause the song, or change tracks or whatever...
So you still need an HTML page.
Moreover, this will ONLY work in the browser, as there's no other way to get this to function outside of a browser, on an iPhone (not 100% true, but Audio is an HTML5 API, ergo, HTML5 support is required to use that particular API).