HTML5 填充一个空的 div

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">

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