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 KortsAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & 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
 
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 KortsAuthor 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
Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

 
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
 
Richard KortsAuthor 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 KortsAuthor 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 KortsAuthor 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 KortsAuthor 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 KortsAuthor 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 KortsAuthor 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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.