I'd like to know if there is an event in html 5 for when a media is loading but can't play because it's not loaded enough, in order to make a loading icon appear. I searched everywhere but can't seem to find an answer :/
You can listent to the event loadstart in order to show the loading icon, and the event play (or canplay or canplaythrough, depending of what you want/need) for hiding the loadding icon.
Those events (and many more) are available for HTML5 media elements, like audio and video. You can check the documentation for the media events for video here: http://www.w3.org/wiki/HTML/Elements/video#Media_Events
Related
I created an audio player dynamically with autoplay enabled. But it is working with desktop browser not in android browser. And progress handler not dispatched.
If I enable the controls attribute and click the play button it will dispatch the progress handler and playing the audio. Even I was tried to play by manually by calling the play() method.
I want to play the audio once canplaythrough handler triggered.
Audio on mobile devices often requires a user event (click / touch) in order to play, which seems to be what is happening in your case.
You can check out the SoundJS Mobile Safe Tutorial to learn more about the issue and a couple of ways to work around it.
Hope that helps.
I have a webapp written in HTML5.
The Home page contains a <video> tag.
The video is correctly played when I load the page for the first time, and if I use controls (pause, play, fullscreen) too.
In order to maintain the webapp always in the fullscreen view, I used only one html page, and when a button (or an anchor) is clicked, I hide the container div (representing the content of the logical "home page"), and show the selected one, when the "home" button is played I show again the original container div.
Originally, the video continued playing when I clicked a button to pass to another virtual page, so I pause it by jquery.
The problem is: only on iPad, when I come back to the first container (that means the home page), the video is no more available, I can't see the poster and the video itself, and the div is black screen.
Some notes I hope could restrict the problem:
The video is statically loaded in a <video> tag and source
attribute.
I've tried to start with an empty src and load it by
jQuery (as explained in many tutorials and in stackoverflow too), it's the same.
The same if I try to create a playlist in
which I select different videos and load the selected one in the
<video> tag using Javascript.
I also tried to reload the page with jQuery, but doesn't work.
The constant beahviours are the following:
Every technique I tried to implement is working well on PC with
Firefox and on the Mac with Safari.
The problem on the iPad appears only when I try to come back to the initial page.
I'm not convinced the problem depends on the technique of show/hide I used, but on the iPad behaviour. I've read some other ways to maintain the webapp in fullscreen view, but apply only to <a> tags (such as this:), I need div stylized as buttons (and managed in jQuery) too.
Thanks if someone can help
I think if you use flowplayer is better it is good implementaton that it work on IPhone and Andriod, it is free.
I am going for a most simplistic playback of background audio. I don't even want to capture media controls or anything. I just want to start the app and play audio until I explicitly close it. That is, it should play audio while hidden.
I used this article and this question as reference and I followed their guidance:
<MediaElement Name="someMedia"
AudioCategory="BackgroundCapableMedia"
IsLooping="True"
Source="Assets/some.mp3"
AutoPlay="true"/>
Also, I added Background Tasks to my Package.appxmanifest's Declarations, checked Audio and set the start page. What am I missing?
You should also enable SystemMediaTransportControls and handle two events on it and on your MediaElement to keep them in sync.
Check this article:
http://msdn.microsoft.com/en-us/library/windows/apps/xaml/jj841209.aspx
Please feel free to suggest a better title for this post, as I wasn't sure how to properly describe the problem in one short question.
I've got a media player page with an HTML5 player and the option for the visitor to choose to play the video or audio for that page. While one is playing, a button to switch to the other is available. For example, if the visitor is playing audio, a "Switch to Video" button is available, which essentially removes the current content and replaces it. This effectively removes the current HTML5 player from the DOM tree as well, of course. In addition to replacing the content, a 'pause' event is triggered on any audio or video element on the page prior to loading the new content.
Unfortunately, if you switch between audio and video quickly enough, you'll end up with multiple items playing simultaneously.
I need to make sure this doesn't happen.
How can I ensure that when I replace the player, the previously loading file does not play?
To see this happening, go to http://www.onlinechurchmediacenter.com/mc/vertigoelectric/5628, choose either audio or video, and once it starts playing keep clicking the "Play Audio" or "Play Video" link which appears below the player. If you continuously click this quickly enough, you'll begin to notice multiple instances of the audio/video playing over each other.
I'd advise not to remove the elements from the DOM. Just hide them and trigger the pause. For good measure, trigger another pause before you play the next item.
Is there a way to access/listen to the previous/next buttons in the iOS HTML5 video player? Ideally I would listen to some sort of a prev and next event and swap out the videos accordingly without the user having to close the video and click my prev/next buttons.
(source: iphonefaq.org)
I am currently using jwplayer to generate the html5 video and listening to their playlist next/prev listeners don't seem to do the trick. I can always find and attach listeners to the actual <video> tag pretty easily though.
If you attach listeners to the video tag itself then when the user hits next and previous then the listeners in the code will put up on those buttons. I am doing something similar with youTube videos. If you hit next it goes to the end of the youtube video and fires a video complete event tag and then I load the next video when that is called, so that the video will one loop without the next button and two the users can hit the buttons. I have not found a way to monitor the buttons in the player on the iphone side, but if I find it I will post that as well since it is important to know both angels if possible.
Funny thing I think I am looking to try and do the same exact thing. I know how to transition the videos to the next without having to leave the fullscreen mode because of using youTube api in the js but I am not able to observe the quicktime player itself and need to for another feature that I would like to work on.
That's the native iOS player which is a thin version of Quicktime. You'll know if it's an HTML5 player when it doesn't transition from the Quicktime player and your page in Safari. How is your movie being embedded?
I recently had a similar problem and was unable to find a solution using the HTML player. I ended up implementing the video player using MPVideoPlayer Framework and launching it from my web view with a custom URL scheme (AppName:Commnad:Asset). I was then able to use the delegate methods to monitor user interactions. If you would like to see basic implementation, let me know and I can add some code.