当我点击它时，视频无法在手机上播放

Question

我的 html5 视频在我点击时无法在移动设备上播放。在桌面上一切正常，但在移动设备上却不行。每当我点击它时我都需要它播放，但那没有发生。

这是我的代码

   $(document).on('mouseover', 'video', function() { 
        $(this).get(0).play();
        this.muted=true;
    }); 



    //pause video on mouse leave
    $(document).on('mouseleave', 'video', function() { 

        this.currentTime = 13;
        $(this).get(0).pause(); 

    });

    $(document).on('click', 'video', function() { 
        $(this).get(0).play();
        this.muted=false;
        this.currentTime = 0;

    });

提前致谢

Answer 1

请注意您尝试在哪些设备上播放它。如果你在 iphone，这是我的建议。在视频标签上添加 playsinline。喜欢 -

<video autobuffer preload=auto playsinline autoplay loop muted style="min-width:100%; min-height:100%;" >
  <source type="video/mp4" src="//bg.cdn.ustudio.com/app/transcodes/TQAdh6DJdtuY.mp4">
  <source type="video/webm" src="//bg.cdn.ustudio.com/app/transcodes/TuX1xml2yZsS.webm">
</video>

Answer 2

touchstart

当您使用移动设备时，您需要设置jQuery移动触摸事件，您已经在使用mouseover或click 所以呢？那里没有点击或鼠标，所以你应该使用 touchstart 事件。

$(document).on('mouseover touchstart', 'video', function() {

和

$(document).on('click touchstart', 'video', function() {

请注意，在某些情况下您需要触摸两次！

当我点击它时，视频无法在手机上播放

video not playing on mobile when i tap on it

html

javascript

jquery

jquery-mobile

touchstart