在html5视频标签中的Mp4视频不能在移动Chrome浏览器和移动Safari浏览器中播放 [英] Mp4 video in html5 video tag not playing in mobile chrome and mobile safari

问题描述

我有这段代码可以在html5页面播放视频： >
< source src =video-background.mp4poster =/ poster.pngtype =video / mp4>
< / video>

问题是它无法在移动设备（Android手机）和移动设备中使用（苹果手机）。但它适用于桌面和移动firefox（Android手机）中的每个浏览器（通过Safari，Chrome，Firefox进行测试）。

我该如何克服这个问题？

编辑：
添加此代码：

  var myVideo = document.getElementById（bgvid）; 
 
函数playVid（）{
 myVideo.play（）; 
} 
 
函数pauseVid（）{
 myVideo.pause（）; 
} 
  

如果我添加一个触发函数playVid（）的按钮就可以了。所以我认为问题在于自动播放。我试图用load事件触发函数，但它不起作用。

解决方案

非常简单，不支持autoPlay移动野生动物园。请测试所有的Android浏览器。

我使用一个技巧（或显示一些弹出窗口来使用事件）：

  var ONLYONETIME_EXECUTE = null; 
 window.addEventListener（'load'，function（）{//在页面加载
 
 document.body.addEventListener（'touchstart'，函数（e）{
 
 if（ONLYONETIME_EXECUTE == null）{
 
 video.play（）; 
 
 //如果您想准备多个视频/音频，请使用以下技巧：
 video2.play（）; 
 video2.pause（）; 
 //现在video2正在缓冲，稍后您可以播放它的可编程性
 //我的个人测试是最多6个视频/音频为android 
 //也许3 max为iOS使用这个技巧
 
 ONLYONETIME_EXECUTE = 0; 
} 
 
，false）
 
}，false）
 
 
 //通常用户触摸屏... 
  

评论：

我不理解ios html5策略。他们停止支持JavaScript控制台记录器（我的任务现在：从版本5.1 ios）。禁用自动播放，webrtc ...
他们想要完美的作品。加载时自动播放可能很危险。在不久的将来，我希望在所有移动设备上激活完整的html5支持。

新的更新：
我发现这很像正面答案：

自iOS 10发布以来，Apple允许静音视频自动播放： https://webkit.org/blog/6784/new-video-policies-for-ios/

I have this code to play a video in a html5 page:

  <video autoplay loop id="bgvid">
    <source src="video-background.mp4" poster="/poster.png" type="video/mp4">
  </video>

The problem is that it does not work in mobile chrome (Android Phone) and either in mobile safari (iPhone). But it works in "every" browser (tested with Safari, Chrome, Firefox) in desktop and also on mobile firefox (Android Phone).

How can I overcame this problem?

Edit: Added this code:

  var myVideo = document.getElementById("bgvid");

  function playVid() {
      myVideo.play();
  }

  function pauseVid() {
      myVideo.pause();
  }

If I add a button that trigger the function playVid() it works. So I think the problem is on the autoplay. I tried to trigger the function with the load event but it does not works.

解决方案

Very simply there is no support for autoPlay on mobile safari . Please test all android browsers .

I use one trick (or show some popup to use event):

var ONLYONETIME_EXECUTE = null;
window.addEventListener('load', function(){ // on page load
 
    document.body.addEventListener('touchstart', function(e){
    
  if (ONLYONETIME_EXECUTE == null) {   

        video.play();

        //if you want to prepare more than one video/audios use this trick :             
          video2.play();
          video2.pause();
          // now video2 is buffering and you can play it programmability later 
          // My personal testing was maximum 6 video/audio for android 
          // and maybe 3 max for iOS using this trick.

        ONLYONETIME_EXECUTE = 0;
        }

    }, false)
 
}, false)


// It is very usually that user touch screen  ...

Review :

I dont understand ios html5 politic . They stop supporting javascript console logger (i quest now :from ver 5.1 ios) .Auto play disabled , webrtc ... They wanna device who works perfect. Auto play can be dangerous on load. In near future i expect activation full html5 support on all mobile devices.

New update : I found this like positive answer :

Since the release of iOS 10 Apple has allowed muted video autoplay: https://webkit.org/blog/6784/new-video-policies-for-ios/

这篇关于在html5视频标签中的Mp4视频不能在移动Chrome浏览器和移动Safari浏览器中播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！