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.
Related
I have to implement a sound notification and I just can't get audio to play on Chrome if the user hasn't interacted with the page.
I have tried workarounds like:
adding iframe with a dummy audio file,
using ViewChild with the play() method,
even using a click() on a button and then trying to play() method again.
None of these seem to work. The only result I had was when the user interacted with the page, but if he refreshes the page and doesn't interact with the page, no sound will play which beats the purpose of the audio notification.
Autoplay seems to not have any problems with Edge, anyone know a good workaround for Chrome?
Stackblitz exemple of my implementation is here
You can't.
Your page does not have a high enough Media Engagement Index to enable autoplay. You can debug this at chrome://media-engagement.
See also: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#mei
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'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
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.
I have a page where the user can click a button to play word pronunciation,
you can take a loot at http://japaneseclass.jp/note/open/351
Right now, the page uses flash player, and it is really heavy to load about 100 flash sound button on a single page.
I have already tried other flash player such as 1bit player, and they are all the same (heavy)
What are some other alternatives?
I tried to use embed, and it is also heavy.
What I have in mind is to use img button and use javascript to play it, but I dont know how.
You could create one flash audio player that sits somewhere on the page unseen, and make your buttons call it using ExternalInterface, passing a reference to the mp3 you want to play. That way the actual media player is very small, and it loads in the audio tracks on demand.