I'm looking at creating an app where the user can select multiple videos from a list of options and then play them in sequence one after the other.
In effect creating a video playlist.
Due to the current penetration % of browsers that can display HTML5 I'm wondering if this is possible using only HTML4/Javascript, and if so, are there any examples online.
Thanks,
Mark
Unfortunately HTML4 did not have support for video. The most common way of supporting older platforms is to use a polyfill, a javascript library that implements HTML5 features for browsers that don't have them.
A good video polyfill is MediaElement.js. This will use HTML5 on browsers that support it, and fall back to flash for browsers that don't.
To implement playlist functionality, you would have to listen for the "ended" event and then switch the source of the video to the next video.
Related
I'm using a HTML5 audio tag to play the audio from the internet.
It's perfectly working on PC browsers and Android browsers.
IN IOS mobile browsers Volume control is not working,
Is there a workaround to correct this?
<audio #audioplayer [src]="audioUrl"></audio>
Different browsers supports a little different sets of media formats. It's possible, that iOS's browser don't support your audio format.
To add volume change support to iOS and not rewrite your entire app from html5 audio to web audio for that, you can combine these audio solutions via createMediaElementSource.
Please see more details at Mozilla website https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createMediaElementSource
I need detect all sound in webpage with banners. How I can do this?
I look to PhantomJS, but can't find a API for browser sound.
PhantomJS (1.x and 2) doesn't support either Flash, <video> or the <audio> element. There is no way to detect sound, because there isn't any.
From the docs:
Support for plugins (such as Flash) was dropped a long time ago.
and
Video and Audio would require shipping a variety of different codecs.
I need to make a sound from a webpage immediately after load (OK/NOT OK signal depending on the case). The page is generated and I can control the content fully.
How do I do this in a modern, cross browser compatible way? I've experienced problems with <audio> tag (maybe browser issues, maybe I'm doing it somehow wrong). Currently I use a small flash player, but as you might guess, it is not a perfect solution.
And yes, the sound is exactly what the user wants, so please no "website with sound is not a good idea" -comments. Generally I would agree, but there are special cases.
Using an audio element works in modern browsers, and for older browsers, you can use an embed fallback (which may or may not work, depending on installed plugins, but if it does not work, there is not much you can do):
<audio src=maamme.mp3 controls autoplay>
<embed src=maamme.mp3>
</audio>
This creates visible controls at the place where you put this element. You can modify those controls to some extent or hide them. If you want to control more exactly when the presentation starts, you can dynamically add the element into the document instead of having it statically there. If old browsers are not very relevant, you could alternatively use an audio element without autoplay and use the HTMLMediaElement interface to start the presentation, do things when it has ended, etc.
If you wish to control the audio yourself, you can do it programatically through javascript.
window.onload = function(){
var snd = new Audio("sound/mysound.wav");
snd.play();
}
This should load the audio file and play it automatically once the page has loaded. It should be noted however that iOS limits any audio being played like this, without a user interaction (e.g. a click) because it forces the user to use up bandwidth and takes control away from them. Android, and other devices may or may not allow autoplaying audio, but all latest web browsers on desktop allow it (Chrome, FF, IE9+, Safari)
I know it is not right out of the box, but is there a hack anywhere that uses javascript, php, or even flash to play the MP4s if the html5 video tag isn't supported?
Yes, there are several frameworks / plugins.
http://videojs.com/ for example provides good fallback.
It basically detects if HTML5 video is available and if not, it uses a provided flash player automatically. To change the order of used engines, you can set the option:
_V_.options.techOrder = ["swfH5"];
which will use swf before HTML5
The compatibility chart has a list of all browsers/technologies available for playback.
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!