I am creating a webpage that uses JavaScript to shuffle a series of audio file questions and their matching drag-and-drop answers. I have successfully implemented this using the native HTML5 audio tags but also have a fallback section for IE 7/8 since these browsers cannot read the audio tag. This fallback section uses conditional comments around object and param tags as demonstrated at the end of this article here.
It works in that it does shuffle in IE, but breaks in that it displays the ugly Media Player-style controls that I had specifically hidden, as this activity uses "play sound" buttons instead of audio player controls.
If anyone needs to see specific parts of code, just let me know.
Many thanks in advance!
Two thoughts (sorry, I'm on a mac at the moment so testing in IE isn't a great option):
I see the parameters where you're trying to hide the controls, but have you also tried applying css to the object tag or to a container wrapped around it? It might be as simple as giving a wrapper div a style of display: none or visibility: hidden.
This isn't a direct answer to your question, but have you investigated any plugins such as SoundManager 2? It uses HTML5 audio with a Flash fallback; I've used it before and had success. Obviously it requires Flash on older browsers, but if that's not an issue it could be easier than trying to figure out how to hide the controls.
It's a nice little page by the way. Good luck!
To address your second question/comment: using an object/embed tag means that you're relying on the browser/OS deciding on what plugin it will use to play audio. Some Googling turns up issues with IE and quicktime, and one possible solution:
Jan 2009 Microsoft update breaks mp3 sound objects in IE7
IE issues with quicktime
Hope it helps. SoundManager 2 might be worth trying if you keep hitting walls, just be aware that using SM2 will mandate that users with older browsers have Flash installed and unblocked.
I’ve managed to out the second issue with the audio in IE – for the shuffle script to work with the audio in IE, you have to call the shuffle BEFORE the audio code – in my case I moved all the conditional comments below the .shuffle(); stuff and it works no worries!
Related
Based on this page on w3schools I don't see any mention of Javascript being needed to play HTML5 videos on recent browsers.
https://www.w3schools.com/html/html5_video.asp
Yet, when I disable Javascript on Safari, I can no longer play Videos embedded on my webpage via Tag. I even disabled lazy loading on a test page to see if that helped, but it didn't.
My primary concern is visitors on Mobile devices so falling back to flash is not an option.
hence the question, Is Javascript needed on fairly recent browsers ? what are best fallback options without requiring any plugins ?
like, using to provide direct download of Video, etc ?
javascript is absolutely not required to play the video in html5
the w3 video is not playing because it is rendering that part of the dom using js and also video is not local it is brought by anchor tag
Firefox seems to add it’s own ‘click anywhere to play’ behavior, it dims the poster and adds a play button. It works great, but the problem is that no other browsers seem to add that behavior automatically. So, I’ve had to implement a javascript workaround to allow ‘click anywhere to play’ in other browsers. They work great, but now it’s broken in firefox. The way it behaves, it seems like the javascript I put in there is getting a click and making it play, but then ff’s own ‘click anywhere to play’ catches the click too, and pauses it immediately. I can inch along the entire video, 1 or 2 seconds at a time, if keep clicking. As for the specific js workarounds that I've tried, many of the examples from these two threads:
How can I add click-to-play to my HTML5 videos without interfering with native controls?
and
Click the poster image the HTML5 video plays?
I was really hoping for a <video> attribute like click-anywhere="yes", but I think I'm out of luck there. Or, as a solution to my problem, something like the css: moz-click-anywhere:false; to allow the js to handle clicks exclusively.
The only solution I can think of is the browser detection route, but I’m hoping there’s a more elegant solution. If not, so be it, but it was worth asking.
I'm breaking my head for few days trying to solve this and can't seems to find answer.
I'm trying to build a proof of concept for video player using HTML5 that works on Android and IOS, the trick is that at certain times i need to display objects on the video itself.
Now i would normally use the Video on Canvas or Video tag to solve it and then just create a layer on that with whatever additional data i want synced and triggered by the timer (on my specific example i've used PopcornJS to trigger time-based events).
NOW, it works fine on normal desktop browsers and it works well enough for android
but it seems that Safari won't render it no matter what... it insist on opening the video in it's own player that disregard any additional JS/HTML.
Ref about the issue can be seen here.
Afraid it isn't currently possible on iPhone in Safari. I've been working on an interactive presentation web app and have encountered the same problem.
This question covers the problem of full screen only video on the iPhone. The answers mention the webkit-playsinline attribute but point out that it only works inside a UIWebView object, not in Safari.
Hopefully this will change at some point in the future.
Im trying to play some sound(mp3) in my browser. Found <embed> but the default controllers (pause button, volume and timeslider) aint really pretty so what im wondering is how i could control it with some jquery buttons?
i would then hide the embed and call controls with jquery and the embed tags id.
Is this possible, and where could i find a overview of that?
Actually you can do this better with html5 (less load from CPU, but less crossbrowser too)
(google it: custom html5 audio player)
but if you want flash behind the scenes, better go with jPlayer :
http://www.happyworm.com/jquery/jplayer/
I agree with Fusion on that fact that HTML5 is probably the easiest way to go with the best result. However what are you going to do with the non-HTML5 compliant browsers? What about mobile?
My suggestion would be to use the HTML5 solution with compliant browsers, and a jQuery fall back solution for non-HTML5 browsers. That way the users with the most current technology get the best solution, but you don't leave everyone else behind.
jQuery has a wonderful ability to modify DOM so swapping out files in the tag would not be an issue. Check out this sound plugin ( http://plugins.jquery.com/project/sound_plugin ) and see if that fits your need.
I know it's generally frowned upon, but in this case I think it might actually be helpful. I want to play a little "ding" sound when a new item is posted on my site. I'll leave the option to turn it off of course.
Now should I do this with JavaScript? Would jQuery be helpful? Or should I use Flash? Looking for something that is widely compatible with different browsers. A link to a code sample or library would be helpful.
Yep, use the jQuery Media plugin - it does exactly that :)
Caveat...I'm not sure if this still works in modern browsers. But what I did in years past was simply write out an embed tag with an audio file as a source, ala:
document.write( '<embed src="some.wav"></embed>');
and the sound would be played when that was added to the page. It was actually used in a chat system and seemed to work ok. That being said, I have no doubt there's more modern, flash or ajaxy ways of doing this. But if you cant find another solution, this might work for ya.
You should probably look into the <audio> tag in HTML5 and then degrade it gracefully to flash/embed. Fore more advanced audio controls, FF4 beta has implemented an entire audio API, docs are here:
https://wiki.mozilla.org/Audio_Data_API
This is probably the direction audio on the web will take, but for wider support you should gracefully degrade it to a flash/embed solution.
Today, I think FF3.5+, Safari3+ and Chrome3+ supports the <audio> tag, but you should double-check codecs for Safari.