We have a website that has audio-video content in the format of .swf files.
There are thousands of active users on the website.
The problem that came up is that some of the new browsers these days do not support Flash.
Some users reported that they are trying to run these files on IE 11 on Win 7. So instead of playing that video, it starts to download itself.
We cannot ask all of our users to use Chrome or try other browsers. We also cannot convert swf files to HTML5 supported videos.
Is there any way that we can implement so that these files will play in browsers?
PS swf files are not working in IE 11 on Windows 7. But they are working on IE in Win10.
Here's an example code we are using-
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" width="400" height="300" id="movie" align="center">
<embed src="http://www.w3schools.com/tags/helloworld.swf" quality="high" width="400" height="300" name="movie" align="center" type="application/x-shockwave-flash" plug inspage="http://www.macromedia.com/go/getflashplayer" />
<param name="movie" value="http://www.w3schools.com/tags/helloworld.swf" />
</object>
I noticed the .swf link is from W3Schools.com... Their example page shows code to embed an SWF and for me it works fine on IE 11 using a Win 7 PC. The code is basic...
<!DOCTYPE html>
<html>
<body> <embed src="helloworld.swf"> </body>
</html>
"Some users reported that they are trying to run these files on IE 11 on Win 7. So instead of playing that video, it starts to download
itself."
It auto-downloads because it's an unknown file type to IE, so it's hoping maybe you know some program to run this filetype X if it just d/loads for you.
Internet Explorer uses Windows' own ActiveX for running web plugins. It's a Microsoft technology so likely your end-users assume that just having the Flash plugin installed in their Chromes or Firefoxes is enough. Nope. On PC there are two versions of the same plugin (one for IE only, and another version for all other browsers).
How to fix this?...
Using the IE browser itself, go to : https://get.adobe.com/flashplayer/
That page will auto-detect browser & check Flash existence (offers link to correct version for IE).
Alternatively just choose "IE (Active-X)" from the drop-down list here : https://get.adobe.com/flashplayer/otherversions/
Final note...
If these are just slides why not just export as images and just display pictures with audio in a web page (this way it would display on mobile browsers too)?
<img src="slide1.jpg" />
<audio controls src="track1.mp3" />
Just a basic example for a slide1.html. The next/back buttons would just be links to other pages like slideX.html etc.
Or even try web-searching a "powerpoint to html online converter" tool. One example is this conversion site. I've not tested but it may help you.
"These swf files are actually created from PowerPoint slides and Audio using ISpring(ispringsolutions.com/ispring-converter)."
I guess this supports advanced effects like transitions etc? So why not export as HTML5 option? Unless you feel SWF gives better content protection...
Good luck whichever way you go..
Related
After researching many topics and different fourms I feel at a loss. I understand the answer may be simple but i'm just not seeing it. So without further ado here is what i have going on.
I have a locally hosted webpage that currently if loaded in Internet Explorer plays audio files (WAV format) through Windows Media Player Plugin. Being that Internet Explorer has been removed from 98% of our computers I am looking to make this page more accessible to the users. Therefore my idea was to code a HTML5 player using the audio tags directly on to the page. Now comes the tricky part. The audio WAV files are being delivered to the user from a database.
I have been able to get the player to load by using the following
<audio controls="controls" id="player" type="audio/wav">
Your browser does not support the audio element.
</audio>
and then I modified the code on the audio file to
<span jwcid="#If" condition="ognl:item.recSegment.tape != null">
<button style="border:0px; background-color: transparent;" onclick="document.getElementById('player').play()"jwcid="#Any" src="ognl:item.recSegment.tape.Url">
<center><img jwcid="#Image" image="asset:play" alt="Play"/></center>
</button>
</span>
After making these changes I opened up chrome and nothing happened.
So then I opened up Firefox and when the button is clicked the player controls goes from paused to playing but does not load the file.
So for a final try I loaded up Internet Explorer on a laptop and when the button is clicked the player says "Error:An unkown error occurred".
I feel at a loss here and know it is something simple I am missing. Does anybody have any Ideas?
Nick
Various browsers have differing support for the various codecs. Even though everyone thinks of WAV as just WAV, there are different codecs for that as well as differing bit depths and different browser have varying support for it (Internet Explorer [IE] has no support for WAV).
Firefox won't play .WAV files using the HTML5 <audio> tag?
http://www.w3schools.com/html/html5_audio.asp
According to the Mozilla Developer Network (MDN) the most widely supported formats are MP3 and AAC/MP4:
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats#Browser_compatibility
I'm trying to make an image banner using HTML5 video across multiple browsers. I have the video working in Chrome and Firefox across most operating systems, but Internet Explorer does not appear to work above IE9. The page where the banner is located does not exist in the same folder as the video files; the banner exists across many pages.
The problem that I can see is that IE9 and 10 cannot see the Flash fallback option within the Video HTML5 code and it doesn't register. I wanted to create some sort of if-else statement that would force users who are using IE9 or 10 to view the Flash version while redirecting all other browsers to the general HTML5 version. This banner works in versions below and including IE8.
I do not have access to the .htaccess file; I saw this suggested somewhere else in order to manually add the MIME type (even after I specified it within each video source line.) I looked at the console in IE9+10 to see if the MIME type was an issue, and no error came up. Right-clicking the space where the video came up also gave me HTML5 video options, but clicking Play did nothing.
If someone can help me debug the code or figure out a wa y to make it work, that would be great. Thank you!
Below is the HTML5 video code that I am using that works across Chrome, Firefox and other browsers.
<video autoplay loop>
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar_Banner.mp4" type="video/mp4">
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar_Banner.ogv" type="video/ogg">
<source src="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/FlashFulmar Slideshow.webmhd.webm" type="video/webm">
<object width="954" height="224" type="application/x-shockwave-flash" data="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar%20Banner.swf">
<param name="movie" value="http://fulmar.mahopac.k12.ny.us/www/mcsd_FR/site/hosting/Fulmar%20Banner/Fulmar%20Banner.swf" />
</object>
</video>
Edit: The codec for the mp4 file is h.264 + AAC.
IE only supports a limited set of codecs for video sources
IE 9+ supports h264 with mp3/aac, vp8 and vp9 are questionable, all others it does not seem to support.
MDN doc on media browser compatibility
So you will have to provide several video sources to support each browser, but not necessarily a video for each browser as some of the browsers do overlap in their support.
Providing a video with h264 aac/mp3 should play on IE, Safari, and Chrome.
While a video with Theora or VP8 should play on Firefox and Opera
A quick and dirty solution would be to force IE to emulate an older version of the browser:
<!-- Mimic Internet Explorer 8 -->
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" >
<meta http-equiv="X-UA-Compatible" content="IE=8" >
Note that these <meta tags must be put in the header before all other elements (except for the title element and other meta elements).
I have an embed tag containing youtube video.
However this does not play on mobile browsers as it says flash required.
I am using HTML and not HTML 5 since my app should support IE 8 too.
I browsed through some awesome JQuery solutions but got only HTML5 based Jquery solutions
Can someone suggest me good solution to have my youtube video play in IE8+ , Chrome , FF+ and mobile browsers too.
This embed code youtube provides by default will work for HTML5 browsers (mobile phones) as well as old browsers that need flash:
http://jsfiddle.net/austinpray/G5GhH/1
<iframe width="560" height="315" src="http://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe>
As best I can tell by looking at the iframe's code, this code sniffs the capabilities of what your browser can play and displays what works best. If you are on browser that has flash capabilities it uses flash and if flash isn't available it defaults to HTML 5. I tested this and it works on iPhones and Android phones. Here is the Youtube support document.
I'm actually developing a simple web site for the company I'm working in.
Every page has a central video, and every thing's fine on FireFox Opera Chrome and IE 9 BUT NOT with Safari 6.0.1 (Mac) neither with Safari 5.1.7 (PC) (it's OK with Mac Safari 5.1.2).
I've already tried to deactivate any other scripts, removed every video attributes, i even rewrote my scripts in a OOP way but ain't got any result at this point.
The fact is, as soon as i try to remove the mp4 source, the whole page runs perfectly.
Test site is visible here : http://www.jsteitgen.com/tests/
I've read a few posts in forums, about a Safari bug when accessing YouTube player. That might be the same problem but couldn't find any confirmation yet.
I wonder if anyone has experienced the same thing / would know something i don't about Safari 6 specifications / or even better : would have a solution !
Hope my English will be clear enough to get answers.
Taking a look on the code on the site which looks similar to the one on "http://drupal.org/node/1536226":
<source src='vids/animLogo.mp4' type='video/mp4' /><!-- Safari /iOs Video -->
<source src='vids/animLogo.ogv' type='video/ogg' /><!-- FireFox / Opera / Chrome -->
<source src='vids/animLogo.wmv' type='video/x-ms-wmv' /><!-- WIndows Media Viedo -->
There are 3 different video files being served. Of course, webm and theora are not supported on the versions of safari that are mentioned in the question, (SOURCE: http://weblogs.mozillazine.org/asa/archives/2009/03/open_video_in_s.html, http://farukat.es/journal/2011/01/488-google-h264-and-video-web, http://farm6.static.flickr.com/5285/5349294818_e6e32d42db_o.png) which prevents the ogv file from being played in safari, without additional plugins from the user (SOURCE: http://www.broken-links.com/2010/09/01/playing-webm-in-safari-with-plugins/, http://blog.andikurnia.com/2010/11/29/playing-ogg-files-directly-from-safari/). With further inspection, the .mp4 file is 3 times larger then the video formats being delivered to firefox, opera and chrome.
My suggestion is to optimize the .mp4 file to make the data being streamed alot less, since the embedded size (720x423) is smaller then the video's dimensions (1280x720), but that a matter of quality vs preformance of site.
Also, to answer your question, there is no youtube player, it mostly has something to do with video codecs and apple's implementation of it, safari does not have native support of Theora and thus, it resorts to the .mp4 verson unless codecs or plugins are avaliable to "decode" the file.
In short, the higher quality and slow video is being played. which needs to be compressed and optimized in order for the website to run a little more smoothly.
I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.
<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>
Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).
I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.
I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.
HTML:
<div id="movie-wrapper">
<div id="webkit-wrapper">
<video width="480" height="360" controls="controls" src="places/video.mp4"></video>
</div>
<div id="other-wrapper">
<!-- Do your video in a new wrapper for all others -->
</div>
</div>
JS:
$(document).ready( function(){
if($.browser.webkit) {
$('#other-wrapper').remove();
} else {
$('#webkit-wrapper').remove();
}
});
Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.
Edit
Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.
And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad
Edit
Other considerations:
Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)
If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).
Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.