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

Posted 2023-05-09

【中文标题】当我点击它时，视频无法在手机上播放

【英文标题】：video not playing on mobile when i tap on it

【发布时间】：2018-11-05 23:49:13

【问题描述】：

每当我点击我的 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;

    ); 

提前致谢

【问题讨论】：

请发布您的html

您尝试在哪个设备上播放它？安卓手机？

我在 iPhone 上播放。但无论我是否在我的 iphone 上玩，它应该可以在每台移动设备上运行，无论是否是 iphone，我只是担心它会在其他设备上这样做

【参考方案1】：

touchstart

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

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

和

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

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

jquery .play not working on mobile

【参考方案2】：

请注意确定您尝试在哪些设备上播放它。如果您使用 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>

【讨论】：

我已经这样做了

哦。您正在使用 angularjs 填充 url？

看看我的ans试试

没有角度我正在使用其他东西。它仍然无法正常工作。我不想让你太久，而且已经晚了。感谢您抽出时间来帮助我。