I want to play a mp3 using HTML 5 audio support.
I was trying to use an audio tag but now I am doing it using javascript.
My "Player" will be just a tiny Play image, that when is pressed plays the audio (not all the audio control with progress).
I am trying to play it using javascript .
function playmp3(url){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', url);
audioElement.load();
audioElement.play();
}
This is my code and it does not work. It executes ok when I click an image that is my Play button.
Url is a string that contains the url of a file.
I am testing in the newest versions of Chrome and FF.
Trying listening for the canplay event before attempting to play the mp3. Here's an example of how to do that:
function playmp3(url){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', url);
audioElement.load();
audioElement.addEventListener("canplay", function() {
audioElement.play();
});
}
The canplay event is fired when the browser can start playing the mp3, but it doesn't guarantee that it can play the mp3 to completion. If that doesn't suite your purposes, there are a couple of other related events that you can listen to such as loadeddata and canplaythrough.
Related
In my xamarin.forms app I am using a webview. I have a video control is playing video on the top.
I am using webview which also html5 based video. When someone playing the video I want to stop video that is playing on control.
How to do that in xamarin.forms.
in your html5 file
set the id of the video
<video id="video">...</video>
And add listener in JS
var video=document.getElementById("video");
video.addEventListener("play",function(){
});
Solution 1
If you want to stop play it ,why don't you stop it in Html 5?
var video=document.getElementById("video");
video.addEventListener("play",function(){
video.stop();
});
Solution 2
If you do want to stop it in Forms , it will be a little complex.
You should implement it in Custom Renderer
var video=document.getElementById("video");
video.addEventListener("play",function(){
invokeNativeMethod();
});
The invokeNativeMethod JavaScript function is not defined in the web page, and will be injected into it by each custom renderer.
You can refer HybridWebView for more details about how to call c# method in JS.
Occassionally* our web app host is slow (not sure why yet) and short video clips in our web app do not play.
Is there some dependable "video started " or "video finished" event that fires in Chrome and Safari (current versions) ?
We don't know how frequent "occassionally" is (hence this question :) )
This reference: http://www.w3schools.com/tags/ref_av_dom.asp contains all HTML5 audio/video properties, methods, and events.
I have recently implemented an audio recorder and playback using the html5 audio tag and both the play & ended events always fired (on all ie, safari, firefox, & chrome...we don't support opera so I didn't test it).
In your case, if the play event triggers at least once, and the ended event triggers, I would say this is conclusive that the video played through.
If one or both of those events don't trigger, then I would suggest looking into some of the other properties of the audio/video element (ie. readyState, or canPlayThrough) to confirm the media source is available.
For more detailed debugging, I suggest the following console.log debugging so you know all events that are occurring. This example is using jQuery, but can easily be implemented without:
var video = $("#player video")[0];
$(video)
.bind('loadstart', function() {
console.log("Loadstart");
if(video.networkState === 3){
console.log("Error loading file");
}
}) .bind('loadedmetadata', function() {
console.log('loadedMetaData');
})
.bind('stalled', function (){
console.log('stalled');
})
.bind('suspend', function(){
console.log('suspend');
).
.bind('canplaythrough', function() {
console.log('canplaythrough');
})
.bind('play', function() {
console.log('play');
})
.bind('pause', function() {
console.log('pause');
})
.bind('ended', function() {
console.log('ended');
});
While the above code won't solve the problem for you, it may expose events in your video player you weren't aware fired. I noticed safari will fire stalled, suspend events more than other browsers will. While it makes sense to include the 'error' event, I never saw it fire myself....YMMV -- Couldn't hurt to include it.
Good luck.
I'm currently using video.js to handle flash fallback from html5 video. When a user clicks a thumbnail on my site, I dynamically (with js/jquery) create and insert the required html into a jquery ui dialog window, which then displays the video, either using html5 or flash fall-back. Here is the relevant code:
//setup jquery ui dialog window
$( "div#video_box" ).dialog({
autoOpen: false,
modal: true,
width: 'auto',
resizable: false,
draggable: true,
close: function() {
$("video").remove()
}
});
//the following code runs after a video thumbnail click event.
{
var $videoBox = $("div#video_box"),
url = VIDEOSTORAGE + id , //url to s3 storage bucket + id of the video/thumbnail that was clicked
html ="";
html += "<video id='downloadedVideo_"+id+"' class='video-js vjs-default-skin' width='320' height='240' controls preload='auto' width='640' height='264' poster='"+PHOTOSTORAGEMEDIUM + id'>";
html += "<source src='"+url+".mp4' type='video/mp4' />";
html += "</video>";
$videoBox.html(html);
$("#downloadedVideo_"+id).load();
$videoBox.dialog( "open" );
_V_("downloadedVideo_"+id); //initialize video player
}
This code works perfectly on all browsers the first time that a video thumbnail is clicked. My bug triggers when a user clicks on the video thumbnail for a video that he has already watched.
In FF I'm getting a "no video with supported mime type is found" error on the second pass. Both chrome and safari load and play the video on the second pass; but do so using their default html5 player rather than the video.js player.
I think that my problem is that video.js must be initialized using unique video-tag ids, and the second time a user clicks a video thumbnail my code tries to initialize the player with a video-tag id that it has already used.
Does anyone know a clean way to avoid this problem?
Thanks in advance for your help.
I solved the issue by creating only one video player instance (instead of a new instance per each new video). I then dynamically change that player's src attribute using video.js' src method.
First I created an initialized a global variable to hold the video player instance (var videoPlayer = _V_("downloadedVideo)). Then I replaced my old video thumbnail click event code with the following:
` var $videoBox = $("div#video_box"),
url = VIDEOSTORAGE + id + "/" + encodeURI(post.video_file_name.split(".")[0]);
$videoBox.dialog('option', 'title', post.video_file_name);
$videoBox.dialog('option', 'position', ["center", 100]);
$videoBox.dialog( 'open' );
$(video).attr('poster', PHOTOSTORAGEMEDIUM + id + "/" + post.photo_file_name);
videoPlayer.src({type: 'video/mp4', src: url + '.mp4'});`
Now video.js is working on all modern browsers EXCEPT mobile safari. For some reason that I can't figure out, mobile safari won't load/play any videos. I just get a blank player with the "loading" image going around in a circle. It won't even load the image at the poster attribute. I might make a separate post on this later today.
Yeah, looks like the player is only recognized the first time it is rendered so you'll need ur code to acknowledge that its a videoJS player every time that player HTML is loaded into the DOM.
Looks like chuck has it. Otherwise:
what I do is load the player into the DOM once, hide it if not needed, show it when loading new src for play.
Hope this helps!
I want create a html5 audio in dynamic and play it,here is the code:
function playAnotherMusic(playUrl){
var audioElement = document.createElement('audio');
audioElement.setAttribute('src', playUrl);
audioElement.setAttribute('controls', true);
audioElement.setAttribute('preload', true);
audioElement.setAttribute('type', 'audio/mpeg');
audioElement.addEventListener("load", function() {
audioElement.play();
}, true);
console.log(playUrl);
audioElement.load();
}
However it doesn't work,the firebug assigin me "HTTP "Content-Type" of "audio/mpeg" is not supported."
how can I solve this problem?
You can't play mp3 files in firefox, it does not support them, you need an ogg version for firefox. Unless that changes, good to keep in mind.
Why doesn't Firefox support the MP3 file format in <audio>
You need to append the audio element to the an existing element.
This would be something like
document.getElementById("my_audio_div").appendChild(audioElement);
Idealy, this should be done before you add the event listener, but after setting all the attributes
Also try audio/mp3 instead:
audioElement.setAttribute('type', 'audio/mp3');
I have a fully functional HTML5 video, it's ID is "#html5-video-7345".
I'm trying to control it using jQuery but I don't know how.
NOTE: I don't need an autoplay, this is just simplified version of what I need:
jQuery(document).ready(function(){
alert('test1');
jQuery('#html5-video-7345').player.play();
alert('test2');
});
Alerts "test1" twice.
The same happens with jQuery('#html5-video-7345')[0].player.play() or jQuery('#html5-video-7345')[0].play().
What's wrong? How to stop() / play() HTML5 videos using jQuery/JS?
I wasn't able to find videojs function reference and Google was totally misleading. Luckily I found this solution, and it works perfect:
jQuery('#html5-video-7345').player.play(); //wrong
jQuery('#html5-video-7345').player().play(); //correct
Make sure the canplay event has fired before trying to calling .play():
jQuery('#html5-video-7345').bind("canplay", function() {
this.play(); // Should start video
});
The canplay event is fired when the browser can start playing the video, but it doesn't guarantee that it can play the video to completion. If that doesn't suite your purposes, there are a couple of other related events that you can listen to such as loadeddata and canplaythrough.