动态加载视频缩略图hover无法播放，返回Promise pending问题排查

运营电影新闻网站，需每小时从JSON接口加载预览缩略图并更新至#movie-trailers元素，加载功能正常。需求为鼠标悬停缩略图时触发视频播放：初始DOM中的缩略图使用jQuery实现该功能无问题，但调用displayRelated()动态生成的缩略图无法播放MP4文件，执行console.log($('video',this).get(0).play())时返回Promise { <state>: "pending" }。

相关代码 #

$(document)
  .ready(function () {
    displayRelated();
    setInterval(displayRelated, 3600000);
  })
  .ajaxStop();
function displayRelated() {
  $.ajax({
    url: "/path/to/my/json",
    dataType: "json",
    async: false,
    cache: false,
    timeout: 5000,
    success: function (data) {
      var obj = jQuery.parseJSON(data);
      $.each(obj, function (index, value) {
        var element = jQuery.parseHTML(value);
        $("#movie-trailers").append(element);
      });
    },
  });
}
$(document).on("mouseenter", ".thumb", function () {
  $("video", this).get(0).play();
});
$(document).on("mouseleave", ".thumb", function () {
  var video = $("video", this).get(0);
  video.currentTime = 0;
});

错误的缩略图结构 #

<div class="thumb">
  <video muted loop preload="none">
    <source src="/path/to/video.mp4" type="application/x-mpegURL">
  </video>
</div>

问题根源与解决方案 #

排查发现问题根源：source标签的MIME类型错误，将其修正为以下格式即可解决：

<div class="thumb">
  <video muted loop preload="none">
    <source src="/path/to/video.mp4" type="video/mp4">
  </video>
</div>

内容的提问来源于stack exchange，提问作者Sevy