Question

我正在尝试从空div和动画中显示HTML5视频以填充页面。动画正在运行，但视频没有播放。任何可能的建议，为什么这可能是？

CSS

.box {
  margin: 30px auto;
  transition: all 2s linear;
  display: block;
}

.hidden {
  display: none;
}

.visuallyhidden {
  opacity: 0;
}

button {
  display: block;
  margin: 0 auto;
}

</style>

HTML

<div id="box" class="box">

<video controls autoplay id="back">
<source src="HomepagemockupVid_2.mp4" type="video/mp4">
</video>

</div>

  <button>TOGGLE VISIBILITY</button>

的Javascript

var box = $('#box');

$('button').on('click', function () {

  if (box.hasClass('hidden')) {

    box.removeClass('hidden');
    setTimeout(function () {
      box.removeClass('visuallyhidden');
    }, 20);

  } else {

    box.addClass('visuallyhidden');

    box.one('transitionend', function(e) {

      box.addClass('hidden');

    });

  }

});

Answer 1

我将您的代码放在JSBin上，在我将源标记的src属性切换为实际指向文件的属性后，它似乎工作正常

所以我从

改变了它

<source src="HomepagemockupVid_2.mp4" type="video/mp4">

到

<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">

结论，你确定你指的是正确的文件吗？

HTML5填空空

1 个答案: