How To Use Flash SWF File As a Skin For My Custom HTML5 Video Player

Question

I am updating my existing web application code from Flash <object> to now using HTML5's <video> and <EMBED> tags instead.

I have a situation to use my own Flash player which has its own complete player controls for playing the video. Because it is important to make sure that, across the web page, the same design view should be there.

I have created a sample test page also and tried it. Here i can solve either one solution only.

Solution 1:

<div id="blk-1" class="toHide" style="float: none; vertical-align:middle">
<video width="640" height="360" controls>
<!-- MP4 must be first for iPad! -->
<source src="https://ins-trs.com/tracker/webapplication/data/videos/Japan.mp4" type="video/mp4" /><!-- Safari / iOS video -->
</video>
</div>

-- Here the controls for the video is default of HTML5 and it works.

Solution 2:

<div id="blk-6" class="toHide" style="float: none; vertical-align:middle">
<embed src="https://ins-trs.com/tracker/webapplication/data/videos/Mouseover.swf"
width="640" height="360"
type="application/x-shockwave-flash">
</div>

-- Here .swf file run with out control buttons to handle the video.

Solution3:

<div id="blk-7" class="toHide" style="float: none; vertical-align:middle">
<object width="640" height="360"
type="application/x-shockwave-flash"
data="https://ins-trs.com/tracker/webapplication/data/videoplayer/player_swf/video_player.swf">
<embed src="https://ins-trs.com/tracker/webapplication/data/videos/Mouseover.swf"
width="640" height="360" >
</object>
</div>

-- Here "video_player.swf" player loads in the screen, but " Mouseover.swf" video is not loaded inside my player after long time and no error also.

My Question is,

1. Is it possible (Solution1)to tell of HTML file to load via my "https://ins-trs.com/tracker/webapplication/data/videoplayer/player_swf/video_player.swf" player fpr .MP4 files to load?

2. How to enable or set the player buttons for the .swf extension video which is running in solution2 above?

3. How to load the .swf video inside my custom own player(solution3)?

Attached as image my own custom player with controls -- (https://ins-trs.com/tracker/webapplication/data/videoplayer/player_swf/video_player.swf) I hope some would come across these situation. It will be great help for me to understand more and update my knowledge.

Thank you for your time reading my question.

Image for your reference of 2 players , i would like to achieve either one for across all the pages similar look for all my videos .mp4 or .swf in my web application.

Custom .swf player look

Default HTML5 player look

Answer 1

You cannot use the SWF as a graphical user interface for the <video> tag.

Also not all browsers will display SWF files, so if you do this, you might have some users seeing no controls on the screen (especially on mobile devices).

It's a simple fix: Just use JavaScript to control playback.

• You have to recreate (or extract) the SWF icons (as PNG images) and load into your page.
• Assign JS functions to each image for controlling playback (eg: play video on image-1 click).
• If you need it, check tutorials for the math calculations of...
  • seek bar handling (graphic click position converts into video seek position).
  • time display (converting milliseconds into hours, minutes or seconds).