Question

您好我在2016年11月开始在某些网站上使用html5视频标签。在每个网站上应用后，视频在PC /笔记本电脑上的每个浏览器和Android / iOS上的浏览器上都能正常工作（尤其是两个系统上的Chrome并在Safari中测试在iOS）。
也许一周前，客户报告我＆＃34;视频不适用于我的平板电脑和手机＆＃34;。当我搜索他有Android的Chrome。当我在Android手机上测试它时，视频无法在Chrome中运行。但在Firefox中一切正常，只在Opera mini视频中显示并点击它后视频运行弹出窗口有问题，如果我想下载视频或在此弹出窗口中运行。当我在电脑上通过Chrome模拟测试它然后视频工作。如果我将PC上的Chrome浏览器调整为移动宽度/高度，而不是视频工作。我尝试测试添加另一种类型的视频（我使用mp4，我尝试添加ogg，另一种驯服，我的意思是webm），但没有任何变化。

我的意思是Android Chrome的更新存在一些问题。在版本54中，他们停止自动播放视频。我的意思是这里有一些错误，但我不知道为什么他们会杀死＆＃34;属性＆＃34;海报＆＃34;如果没有视频可用，则显示图片。

有什么方法可以解决这个问题吗？

我使用HTML5视频的网站：here

代码：

//CSS part
.blok_video_home{
  position: relative;
  display: block;
  text-align: center;
  background-color: #626262;
  overflow: hidden;
}
video#bgvid {
  height: auto;
  left: 50%;
  min-height: 100%;
  min-width: 100%;
  opacity: 1;
  position: absolute;
  top: 50%;
  /*-ms-transform: translateX(-50%) translateY(-50%);*/
  -webkit-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: auto;
  z-index: 0;
}
.no-borderradius video#bgvid {
  left: 0;
  top: 0;
    }
.pozadi_bez_videa{
  background-size: cover !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  background-image: url("../../img/bg-video-home.jpg") !important;
}

//HTML part (here i have image in "poster" but now I try delete him and try make it via CSS class ".pozadi_bez_videa" which add same image to background
  <div class="blok_video_home">
    <video autoplay loop poster="" id="bgvid" preload="auto"></video> <?php /* poster="img/bg-video.jpg" */ ?>
  </div>

  //jQuery part (to this "ifs" code enter on mobile, but I mean not add this <source> on mobile Chorme on android...
$( document ).ready(function() {
  var min_sirka_1280 = window.matchMedia("(min-width: 1280px)");
  if (min_sirka_1280.matches) {
    $("#bgvid").html('<source src="video/sklepy_1080p_web_11_2016.mp4" type="video/mp4"></source>' );
  }

  var min_sirka_1000 = window.matchMedia("(min-width: 1000px)");
  var max_sirka_1000 = window.matchMedia("(max-width: 1279px)");
  if ( (min_sirka_1000.matches)&&(max_sirka_1000.matches) ) {
    $("#bgvid").html('<source src="video/sklepy_720p_web_11_2016.mp4" type="video/mp4"></source>' );
  }

  var min_sirka_700 = window.matchMedia("(min-width: 700px)");
  var max_sirka_700 = window.matchMedia("(max-width: 999px)");
  if ( (min_sirka_700.matches)&&(max_sirka_700.matches) ) {
    $("#bgvid").html('<source src="video/sklepy_720p_web_11_2016.mp4" type="video/mp4"></source>' );
  }

  var min_sirka_500 = window.matchMedia("(min-width: 500px)");
  var max_sirka_500 = window.matchMedia("(max-width: 699px)");
  if ( (min_sirka_500.matches)&&(max_sirka_500.matches) ) {
    $("#bgvid").html('<source src="video/sklepy_394p_web_11_2016.mp4" type="video/mp4"></source>' );
  }

  var sirka_okna = parseInt($(window).width());
  if ( sirka_okna <= 499 ) {
    $("#bgvid").css("display","none");
    $("#bgvid").hide();
    $(".blok_video_home").addClass("pozadi_bez_videa");
  }else{
    $(".blok_video_home").removeClass("pozadi_bez_videa");
  }
});

我搜索解决方案可能两天但没有。有人可以帮忙吗？

HTML5视频无法在Android上使用Chrome浏览器

0 个答案: