How can I add click-to-play to my HTML5 videos without interfering with native controls?

前端 未结 5 613
礼貌的吻别
礼貌的吻别 2021-01-04 01:49

I\'m using the following code to add click-to-play functionality to HTML5 video:

$(\'video\').click(function() {
  if ($(this).get(0).paused) {
    $(this).g         


        
相关标签:
5条回答
  • 2021-01-04 02:07

    Torsten Walter's solution works well and it's a fairly elegant solution to the problem, and it's probably the best way to handle it, even if it doesn't handle click-to-pause. However, his solution got me thinking about a hacky way to do it, and I came up with this:

    Markup

    <div id="container">
      <div id="videocover">&nbsp;</div>
      <video id="myvideo" />
    </div>
    

    JavaScript

    $('#videocover').click(function(event) {
      var video = $('#myvideo')[0];
      if (video.paused) {
        video.play();
      }
      else {
        video.pause();
      }
      return false;
    });
    

    CSS

    #container {
      position: relative;
    }
    
    #videocover {
      position: absolute;
      z-index: 1;
      height: 290px; /* Change to size of video container - 25pxish */
      top: 0;
      right: 0;
      bottom: 0;
      left;
    }
    

    Basically, it keeps the clickable cover up all the time to handle the click-to-play/click-to-pause functionality, but makes sure the cover doesn't overlap with the controls at the bottom of the video.

    This is, of course a kludge, as it:

    • assumes all browsers place the controls in the same area, and that the controls are the same height
    • requires specifying the height of the video container in CSS
    • prevents the controls from appearing when the mouse hovers over the video

    But I figured I'd put it out there.

    0 讨论(0)
  • 2021-01-04 02:08

    Great answers here. Thank you for these. Here's a trick I figured out for making controls clickable, all jQuery.

    $('#video_player').click(function(e){
    
        var y = e.pageY - this.offsetTop;
    
        //Subtract how much control space you need in y-pixels.
        if(y < $(this).height() - 40) 
        {
            //$(this).get(0).play();
            //... what else?
        }
    
    });
    
    0 讨论(0)
  • 2021-01-04 02:12

    You could try event.stopPropagation and see if that works. Though I think that would either stop the native controls from working, or just not do anything.

    $('video').click(function(event) {
      event.stopPropagation();
      if ($(this).get(0).paused) {
        $(this).get(0).play();
      }
      else {
        $(this).get(0).pause();
      }
    });
    

    If the browser considers the native controls and video all part of the same element (and I believe they do) you're probably out of luck. jQuery's event.target wouldn't allow you to tell the difference between a click on the video and a click on the controls.

    So I think your best option is to build your own controls (old tutorial, still pretty straight forward). Or ask the browser devs to make a click on the video play/pause when controls are enabled. Seems like it should do that by default.

    0 讨论(0)
  • 2021-01-04 02:17

    You could add a layer on top of the video that catches the click event. Then hide that layer while the video is playing.

    The (simplified) markup:

    <div id="container">
        <div id="videocover">&nbsp;</div>
        <video id="myvideo" />
    </div>
    

    The script:

    $("#videocover").click(function() {
        var video = $("#myvideo").get(0);
        video.play();
    
        $(this).css("visibility", "hidden");
        return false;
    });
    
    $("#myvideo").bind("pause ended", function() {
        $("#videocover").css("visibility", "visible");
    });
    

    The CSS:

    #container {
        position: relative;
    }
    
    /*
        covers the whole container
        the video itself will actually stretch
        the container to the desired size
    */
    #videocover {
        position: absolute;
        z-index: 1;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }
    
    0 讨论(0)
  • 2021-01-04 02:22

    I know this is an old question but I ran into the same issue and found an other solution! Playing the video on click and also pause it on click. But as the original poster I ran into problems with the controls. Solved the issue with jquery like this:

    $("video").click(function (e) {
        if(e.offsetY < ($(this).height() - 36)) // Check to see if controls where clicked
        {
            if(this.paused)
                this.play();
            else
                this.pause();
        }
    });
    

    I check the offset in the click and if it is over the controls my play/pause functions doesn't do anything.

    0 讨论(0)
提交回复
热议问题