Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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?
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Nancy O.