Skip to main content
P
Preview IE in DWCC Mac
Participant
April 21, 2015
Question

HTML5 video, show play button in center

  • April 21, 2015
  • 1 reply
  • 23295 views

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

    This topic has been closed for replies.

    1 reply

    Ken_Binney
    Ken_Binney
    Inspiring
    April 21, 2015

    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?

    P
    Preview IE in DWCC MacAuthor
    Participant
    April 21, 2015

    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

    P
    Preview IE in DWCC MacAuthor
    Participant
    April 21, 2015

    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


    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

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices