How do I convert Flash to play properly in HTML 5 & on Apple devices?

I have some "old" code that plays a video in "Flash", which means it does not work on Apple platforms and on Firefox it asks something like "Want to play Flash Video?". Of course we don't want customers to see that. The "Flash" code is:
<object id="Object1" type="application/x-shockwave-flash" data="player_flv_maxi.swf" width="500" height="360">
<noscript><a href="http://www.dvdvideosoft.com">freeware</a></noscript>
<param name="movie" value="player_flv_maxi.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="opaque" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="quality" value="high" />
<param name="menu" value="true" />
<param name="autoplay" value="true" />
<param name="autoload" value="false" />
<param name="FlashVars" value="configxml=intro_video_AJ_Antico_Spring_2010_8_3_2010.xml" />
</object>

Open in new window


My understanding is that in HTML 5 there is a way to do this without Flash.

How do I convert the swf file into something else that will work natively in HTML 5 (like maybe mp3?).
Richard KortsBusiness Owner / Chief DeveloperAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You need to convert the movie to.  Either mp4 webm https://www.html5rocks.com/en/tutorials/video/basics/

To convert, I would start with the original file and export to what I need. But there are some possible web conversions such as https://convertio.co/swf-webm/
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Scott,

I had an mp4 of the file made in 2012. I found out a way to convert to ogg also, so I used that on the mp4.

My test code is:
<!DOCTYPE html>

<html>
<head>
<title>Antico Video Test</title>
</head>
<body>
<video width="500" height="360" autoplay>
  <source src="player_flv_maxi.mp4" type="video/mp4">
  <source src="player_flv_maxi.ogg" type="video/ogg">
Your browser does not support the video tag.
</video> 

</body>
</html>

Open in new window


When I run it on the server (with both the mp4 & ogg files also uploaded), it shows a blank screen.

Suggestions?
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
If you use a something like vlc media player, can you download player_flv_maxi.mp4 and play it directly?  Are you 100% sure it is an mp4 and not just an mp4 extension?  

Ogg has been replaced by webm and I would remove that.

Start out by verifying the video though.
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Richard, I double checked your code and it works fine.  It may just be your video that is not right. Also it may depend on where it is hosted and if your server allows that file type too.

http://jsbin.com/zoparakuqi/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
  <video width="500" height="360" autoplay>
  <source src="https://ia800209.us.archive.org/24/items/WildlifeSampleVideo/Wildlife.mp4" type="video/mp4">

Your browser does not support the video tag.
</video> 

</body>
</html>

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
The video (my mp4 version) does not play in vlc media player.

So I assumed it was not the right format, so I tried two different free on-line converters that convert swf to mp4.

Both failed with error messages. I forget which ones I used, there are a bunch.

If I run the current live program in FireFox, it shows me the attached image, implying it knows that it's Flash. If I click that "Run Flash" icon, it runs it (the video). You can try it at www.ajantico.com/intro.htm. I tried it in Chrome, it shows nothing (a blank space). I did not try in Edge.

I'm stumped.

Richard
intro_in_FF.JPG
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
Attached is the result of using a thing called Convertio.
Convertio.JPG
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
What might be happening is the swf file is just a container for an external source file?  Check the size of the swf file and if it looks small, you then know it does not contain an actual video file and only an player for an external source.  If your video is a minute long and your swf file is not close to 10 megs or even 1 meg, then you know that is your answer.

Then you need to get to the source file.  Use the browser console to detect this. Another option is to screen record the stream.  I think vlc will do that as well.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Looking at your site, there is mixed content and it is throwing errors because of https.  Also, https://www.ajantico.com/swfobject.js is 404 not found.
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Your swf file looks like it is only 13k.  At least that is what downloaded from https://www.ajantico.com/player_flv_maxi.swf  I would say the issue is a combination of things.  Mixed content, missing swfobject and the swf file is a player.

Looking at view-source:https://www.ajantico.com/intro_video_AJ_Antico_Spring_2010_8_3_2010.xml
<?xml version="1.0" encoding="UTF-8"?>
<config>
	<param name="flv" value="intro_video_AJ_Antico_Spring_2010_8_3_2010.flv" />
	<param name="width" value="500" />
	<param name="height" value="360" />
	<param name="autoplay" value="1" />
	<param name="autoload" value="0" />
	<param name="buffer" value="5" />
	<param name="buffermessage" value="" />
	<param name="buffercolor" value="ffffff" />
	<param name="bufferbgcolor" value="858686" />
	<param name="buffershowbg" value="0" />
	<param name="title" value="intro_video_AJ_Antico_Spring_2010_8_3_2010" />
	<param name="titlesize" value="20" />
	<param name="titlecolor" value="ffffff" />
	<param name="margin" value="0" />
	<param name="srt" value="0" />
	<param name="srtcolor" value="ffffff" />
	<param name="srtbgcolor" value="858686" />
	<param name="srtsize" value="11" />
	<param name="showstop" value="1" />
	<param name="showvolume" value="1" />
	<param name="showtime" value="1" />
	<param name="showplayer" value="autohide" />
	<param name="showloading" value="autohide" />
	<param name="showfullscreen" value="1" />
	<param name="showswitchsubtitles" value="0" />
	<param name="showmouse" value="autohide" />
	<param name="loop" value="0" />
	<param name="startimage" value="start_frame.jpg" />
	<param name="playercolor" value="858686" />
	<param name="loadingcolor" value="dddddd" />
	<param name="bgcolor" value="ffffff" />
	<param name="bgcolor1" value="ffffff" />
	<param name="bgcolor2" value="ffffff" />
	<param name="buttoncolor" value="ffffff" />
	<param name="buttonovercolor" value="c3c4c4" />
	<param name="slidercolor1" value="ffffff" />
	<param name="slidercolor2" value="cccccc" />
	<param name="sliderovercolor" value="c3c4c4" />
	<param name="loadonstop" value="0" />
	<param name="onclick" value="playpause" />
	<param name="onclicktarget" value="_blank" />
	<param name="ondoubleclick" value="fullscreen" />
	<param name="ondoubleclicktarget" value="_blank" />
	<param name="playertimeout" value="1500" />
	<param name="videobgcolor" value="000000" />
	<param name="volume" value="100" />
	<param name="shortcut" value="1" />
	<param name="playeralpha" value="100" />
	<param name="srturl" value="video.srt" />
	<param name="top1" value="0" />
	<param name="showiconplay" value="1" />
	<param name="iconplaycolor" value="ffffff" />
	<param name="iconplaybgcolor" value="dddddd" />
	<param name="iconplaybgalpha" value="25" />
	<param name="showtitleandstartimage" value="0" />
</config>

Open in new window

The file you are looking for is https://www.ajantico.com/intro_video_AJ_Antico_Spring_2010_8_3_2010.flv

That you can load into vlc and convert to mp4.  Media->Convert/Save  Choose the network tab if viewing it online or file if loading from your computer directly.  If you choose network, use https://www.ajantico.com/intro_video_AJ_Antico_Spring_2010_8_3_2010.flv  Then click the Convert/save at the bottom and select mp4.
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
To my recollection, there never was swfobject.js used. I have been responsible for this site since 1998.

I don't know what to do.
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I didn't fully read you comment at first. The file intro_video_AJ_Antico_Spring_2010_8_3_2010.flv is what we are getting rid of. We want the .swf file in the file intro.htm to be mp4 (or something else) that works with all of today's common browsers.

The code I put in the very first post on this. That is what runs in FireFox under the conditions I described earlier.

It MIGHT be that the customer has the video in some other (non-flash) format. I sort of hate to ask, because if they DO NOT, then what?
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I got LUCKY. I found an mp4 file with an unlikely name (videofilename.mp4), I ran it in vlc and it works. It's too big, can I set the height / width with this:
  <video width="500" height="360" autoplay>?

Thanks for all your work!!

Richard
0
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
Richard, What I was getting at is you would have had to convert the flv file. Since you have the mp4 you are in business. However, make sure it is at 100% size.  You can use vlc to convert/save to a different size and there is also handbrake https://handbrake.fr/   Handbrake gives you more options and the thing you want to look at is the bit rate because that plays a big roll in the file size.  Play with setting it at 1000 +/-.  Also make sure you maintain the ratio of the width/height too.

Good luck!
0
Richard KortsBusiness Owner / Chief DeveloperAuthor Commented:
I did a test of the page using the mp4 video & the html 5 video tag. They won't be able to tell the difference.
1
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Adobe Flash

From novice to tech pro — start learning today.