Using HTML5 and jQuery Mobile I have a page with 3 buttons.
What I want to do is have each button select a different sound, then have another button to play the selected sound.
Can anyone give me a steer?
Thanks
Jim
Check-out the HTML5 <audio> tag. You can pre-load audio clips and play them when the user interacts with elements.
Docs for <audio>: https://developer.mozilla.org/en/HTML/Element/audio
You may want to check-out a pre-made plugin for this, I have seen JPlayer used a lot: http://jplayer.org/
Although a plugin will not be necessary, the HTML5 <audio> tag comes with the ability to control it using JavaScript.
Related
Currently, I've observed that the audio player added via HTML tag looks different in appearance in Chrome and Firefox.
Is there any standard we can follow to make its appearance same across browsers or implement custom player in an easy way to achieve the purpose?
Yes, we can have customised audio player which can look same across all the browsers. But the thing is we need to do styling and develope functionality of that audio player like
a play/pause button
a seek slider
the current time indicator
the duration of the sound file
a way to mute the audio
a volume control slider.
May be the following article will help you
https://css-tricks.com/lets-create-a-custom-audio-player/
Yea You can have it.
You Just Need to write the Appearance .css for all platform Respectively And Explicitly
I am developing an application where I need to display some animation in the canvas along with the video as a separate element, for the same I need to maintain the synchronisation between two DOM elements very precisely.
I was thinking of playing the animation as video tag plays the video. Is there any way I could see how the html5 video tag is implemented?
Theoretically, each browser can have their own implementation of the video tag. Besides of that, they will try their best to follow some rules specified by w3.org
This is the video tag draft:
https://www.w3.org/TR/2011/WD-html5-20110113/video.html#video
If yout want to sync something with a video you will want to use some video tag events:
https://www.w3.org/2010/05/video/mediaevents.html
A timeupdate event listener can be set on the video which will allow you to synchronize other elements on the page with the video as it plays. Video elements have many other events in addition to timeupdate, such as play, pause, and seeking.
The implementation of video elements will differ depending on the browser and may not be completely public, such as how they work with DRM.
I have an audioless video implemented using HTML5's <video> tag. I'm trying to find out if auto-playing the video and automatically looping it (assuming I add a button to remove loop as well) would cause accessibility issues? I know there are rules regarding audio as well as video with audio that prevent you from doing that, so I'm also wondering if this video is practically considered a GIF.
The video can be found here for reference:
http://www.med.uottawa.ca/bmi/eng/lee.html
This is technically an accessibility violation if it plays for more than 5 seconds. It affects users with disabilities such as attention deficit disorder. You need to provide a button to stop the video from playing immediately, not only a button that disables the automatic loop.
I'm just a beginner.. How to play a video or audio using the anchor tag?
I used the tag n it played normally... I used the n it played... But when I anchor it:
<html>
Click here!
</html>
It launched WMP or VLC... Is it possible to play it without launching other applications?
You can use HTML5 tags, like video or audio . It's fairly easy to customize. See this example.
Be aware that old browsers don't support HTML5 and that you need different versions of the files for a couple of browsers. It's all explained on the linked sites.
What you are doing now is using the a tag to link a file. This will not embed the content in your website, but opens a player on your computer.
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.