HTML5 video, show play button in center

[Preview IE in DWCC Mac]

Using DWCC on mac. On my site, home page has HTML5 video, contained by <div>. Works fine in all browsers, and video and poster image scale nicely for mobile devices.

My problem: I can display video controls, but I'd like to also have a play button image in the center of the video window. Nothing I've tried has worked (onclick attribute with code, javascript). I was hoping there was a simple way to style the "controls" attribute to show a play button in the middle.

Suggestions?

Thanks,

Tom

[Ken_Binney]

Hi Tom-

I was under thee impression that the play button would appear by default.

Could you put your page online and post a link for us?

[Preview IE in DWCC Mac]

Here is the link to it: http://www.SimplicityPayments.com/CoreSource

Button appears in center only in FireFox. I’ve added the text and instruction to click below only because I can’t get the center play button.

Tom Penko

Brand Manager,

ECHO Health, Inc.

Office: 440.249.4148

Mobile: 440.334.6860

[Ken_Binney]

Tom, I am not expert is this, but what would you think of modifiying this image with your desired play button icon.

http://www.simplicitypayments.com/CoreSource/_images/videoPoster1A.jpg

[Preview IE in DWCC Mac]

Actually, I had a version with a button in the image. Then, by using the on-click attribute with some code inside the

tag, I was able to click anywhere on the image (most people would probably click on the button) and it would play. The problem in this case is that if I tried to keep the “controls” attribute in the

tag, the video wouldn’t run at all in FireFox, Opera and Chrome. Not sure about Explorer.

The version I have now works with everything, though it’s not as intuitive. It’s interesting, too, that on an iPhone5, the middle play arrow appears in the middle of the video screen over the top of the poster image. On my MacBook, it doesn’t appear.

Tom Penko

Brand Manager,

ECHO Health, Inc.

Office: 440.249.4148

Mobile: 440.334.6860

[Nancy OShea]

HTML5 video is browser dependent.  So the play button or arrow is driven by the device & browser you use which varies.  To add play buttons above the video requires JavaScript.

HTML5 Video

Nancy O.