Our application has a lot of videos to play on HTML page, at the beginning. I tried both object and video tags to play these videos, but I found the problem of cross-browser compatibility, these 2 tags can't work well on IE 6/7/8. Absolutely, we are not able to develop a new video player to do it, and I guess video playing is a very common case for Java EE development, so I want to ask if there is any good way for us to play videos with good cross-browser compatibility.
Thanks.
Try jplayer which is compatible with Windows : IE6, IE7, IE8, IE9, IE10, IE11 and also works well on Opera mini and android browser.
http://www.jplayer.org/
Doing something like the following will allow you to play videos on most browsers:
<video controls>
<source src="myVideo.mp4" type="video/mp4">
<source src="myVideo.webm" type="video/webm">
<object type="application/x-shockwave-flash" data="player.swf?videoUrl=myVideo.mp4">
<param name="movie" value="player.swf?videoUrl=mVideo.mp4">
</object>
</video>
In this case player.swf is a Flash player such as those available with popular video players like MediaElementJs (which of course you could simply use instead) which plays MP4 files. Or if you have a Flash flv file you can play it here without the player.swf.
You should also include the html5shiv file so that the video element is not ignored by these older browsers.
But you may have tried all this, so an example of the code you tried that didn't work would be useful to see.
Related
I have TV video stream (which is apparently mpeg-ts stream), if I use html5 video tags it all works find on win/mac machines using Chrome.
<video id="player1" width="640" height="360" preload="none" controls playsinline webkit-playsinline>
<source src=""http://192.168.1.72:9981/stream/channelid/2013555866?ticket=388550710ddf21ad5c6ffd61fcd3d0dc24cf46d2&profile=matroska type="video/webm">
</video>
But that doesn't work on Android tablet nor on iOS.
I have tried installing multiple different JS player, such as mediaelement, plyr, video.js, mpegts... And I have installed like all three browsers on Android tablet - Chrome, Opera and Mozilla for testings. Every single JS player works fine if I watch the video from my laptop (Chrome), but none of them works when I access from Android device.
The furthest I can get is using Opera+plyr(or video.js) to get an audio playing fine, but with a black screen, no video.
add this as your video starting tag and it will autoplay for android and safari mobile :
<video autoplay="" muted="" loop="" playsinline="" id="vid" preload="auto" width="100%" height="100%">
you also need mp4, ogv and webm formats for crossbrowser
This might work for you. It works fine for me.
<video autoplay="autoplay" loop="loop" muted defaultMuted playsinline>
I would try enabling controls as on iOS if your video is supposed to start automatically it will not allow it.
Another thing is to try adding an HTTP Range Header, it helps to split video into byte ranges which is something to take into mind with mobile. This is more for iOS in general but take a look at this link: http://fdiv.net/2013/05/17/getting-html5-video-work-ios-mobile-safari
Also as mentioned by other check the format of your video you should ALWAYS have multiple types available.
Video tag doesn't work on mobile. What I've seen people do lately is use gif's as the poster of the video on mobile. I would also look into tools like Wistia for extra video support. Gifs work on mobile, but as the video assets, they take a while to load since they're usually big.
I don't recommend self-hosting as you won't have a ton of support such as slowly loading the video or dynamically switch from 320p version to HD version as it loads, etc.
For example https://wistia.com/learn/marketing/boost-engagement-with-gifs
If you're using a separate host for your files, its server should have a valid SSL certification like my case. My android video player did not work until I added a certification.
I have the following HTML code, but it is not working, the video does not start...
Yet, when I test this code in my browser Chromium, it works perfectly.
Any idea of the problem?
<video width="576" height="324" controls poster="">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag or the file format of this video.</video>
My video is playing fine using your code(in chrome) without giving any troubles so, the problem is with the video you are playing but not the code.
due to Chrome removing support for h264, on some machines(it entirely depends upon the codecs installed on the computer), mp4 videos encoded with it will not work under certain circumstances these issues with video encoding formats in chrome leads the code to not working perfectly.
there are a couple of solutions in stackoverflow you can give a try:
MP4 not playing on Chrome version 27.0
html5 video issue with chrome
cheers!
We ran into a very strange problem with JW Player and really don't know an approach to solve it.
JW Player shows the error:
Error loading media: File could not be played
sporadically across all browsers and platforms (sometimes it shows up and sometimes not). It took me over 30 reloads to get it and some of my colleagues got it with their first try. It's behavior is very inconsistent and kind of random.
We're using FirstSpirit as CMS on an Apache Tomcat instance running on Windows server. The problem occurred on Chrome, IE and Firefox across all versions.
The MIME types of all videos are correct as their codecs are. If supported, JW Player is running in HTML5 mode. We use Flash only for older browsers (IE8 groan).
I would appreciate any help. Thanks!
Marcus
UPDATE:
Example page with video box on the right side. Example page with video
UPDATE:
We updated the version as Ethan from JW Player suggested, but it's still not working properly.
I would suggest to encode the video in .mp4 and .ogg. (MP4 is supported in Safari and IE9, Ogg in Firefox, Chrome and Opera and as you mentioned IE6-8 uses flash only). Thus your video element will look something like:
<video width="300" controls>
<source src="my_video.ogg" type="video/ogg">
<source src="my_video.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
This will ensure that the video will be played if the browser support HTML5. I hope this helps
There is a simple link
01. The Name of Track
How to play the mp3 file, when user clicks on link? Please help me to find some simple and effective solution.
Thank you.
Thank you for help.
I choosed this solution http://www.schillmania.com/projects/soundmanager2/demo/play-mp3-links/ as the most appropriate in my case.
Use HTML5 <audio>
<audio controls id="linkAudio">
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<script>
document.getElementById("link_id").addEventListener("click", function () {
document.getElementById("linkAudio").play();
});
</script>
Note: As audio is an HTML5 tag, it won't support old browsers, so be
sure before you use it..
Or take a look at this article
Many browsers today (like Chrome and Firefox) will not play MP3 or MP4 files, due to IP restrictions. You can either transcode your files to compatible alternatives, like Ogg, or you'll have to rely on plugins to get universal browser support. One very good option is Soundmanager, which I'm using in a project where transcoding is not an option. It uses HTML 5 playback when it can, but falls back to an invisible Flash movie if the file type is not supported by the chosen browser. It's extremely flexible, but it has a bit of a learning curve. The demos are fantastic though, and provide several types of players that you can probably just drop in to whatever your interface is.
You have several options, you could use the html5 audio tag, which would create a small player that would allow you to play the audio:
<audio controls width="100" height="100">
<source src="some.mp3" type="audio/mp3">
<!-- Fallback for older browsers -->
Your browser doesn't support html5 audio
</audio>
You could also use the embed html tag:
<embed src="some.mp3" autostart="false" id="somemp3" enablejavascript="yes">
Then run the following javascript upon clicking the link:
var snd = document.getElementById(somemp3);
snd.play();
Or you could use the embed method for browsers that don't support html5 audio, by putting the above code within the audio tags, and it will show up only if the browser doesn't recognize the audio tag
You could also use a flash audio player.
Play Audio
<audio>
<source src="demo.ogg" type="audio/ogg">
<source src="demo.mp3" type="audio/mpeg">
Your browser doesn't support the audio element.
</audio>
Using jQuery:
$("a").click(function() {
$("audio").play();
});
I have this html and js which I'm using to play some audio:
HTML
<div id="audio-clips">
<audio src="/audio/cha-ching.wav" type="audio/wav" id="audio-cha-ching">
</div>
JavaScript
var sfx = $("#audio-clips #audio-cha-ching")[0];
sfx.play();
This is failing in IE 8, due to it not recognising the "play" method. Is there a jQuery audio-playing method which works cross-browser, with the same code? I'd rather do that then try to fall back to some IE-specific solution (as browser-specific solutions are always brittle).
I would strongly recommend using howler.js for playing audio files. It has great compatibility across browsers and devices. It uses HTML5 audio when available, and falls back to older technologies when necessary.
HTML5 support on IE started on IE9 :(.
By the way, I am not sure if WAV is played by IE(I would not say so):
http://en.wikipedia.org/wiki/HTML5_Audio
Fallback solution for HTML and legacy browsers
The audio tag is available in Internet Explorer 9 and above. You can check this using Can I Use - Audio.
The wav format is supported by Firefox 3.6+, Safari 5+, Opera 10.5+ and Internet Explorer 9+ on the audio tag. You would need to add an MP3 source in addition to the wav source to get Chrome support.
To get backwards compatible support, you use the following - Flash element omitted for brevity.
<audio controls preload="auto" autobuffer>
<source src="sound.mp3" />
<source src="sound.ogg" />
<source src="sound.wav" />
<!-- now include flash fall back -->
</audio>
Encode your audio in mp4 format, instead of wav. This works for me in IE 11.