Html5 视频无法在 bxslider 上播放答案

【问题标题】：Html5 video not playing on bxsliderHtml5 视频无法在 bxslider 上播放
【发布时间】：2016-06-01 18:34:21
【问题描述】：

目前我有一个 bxSlider，它在第二张幻灯片上有一个视频。我已经使用视频标签在滑块内正常工作的视频。但我想做的是在幻灯片处于活动状态和当前状态后播放视频。

这是我目前的幻灯片。

onSlideAfter: function(currentSlide, totalSlides, currentSlideHtmlObject){

                $j(currentSlide).addClass('active-slide');

                if(currentSlideHtmlObject == 1){
                    var video = document.getElementById("video");
                    console.log(video.play());
                } else if(currentSlideHtmlObject == 2 || currentSlideHtmlObject == 0) {
                    $j('video')[0].currentTime = 0;
                }

                modifyDelay(currentSlideHtmlObject);
            }

忽略我的控制台日志，我只是看看 .play 是否做了什么。它没有。然而，一旦幻灯片放映，视频似乎就无法播放。如果我将视频设置为自动播放，它会起作用，但这似乎不起作用。

如果我跑：

document.getElementById("video").play();

我得到以下信息：（我不完全理解）。

Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}

谢谢

【问题讨论】：

标签： javascript html html5-video bxslider

【解决方案1】：

您只需使用回调onSlideBefore()。更多细节在 cmets 的源代码中。

片段

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <title>Multi BxSlider</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.css" />
  <style>
    /* This centers the img and video */
    
    img,
    video {
      display: block;
      margin: 0 auto;
    }
  </style>
</head>

<body>

  <ul class="bx">
    <li data-idx="0">
      <img src="http://dummyimage.com/640x360/000/fff.png&text=1">
    </li>
    <li data-idx="1">

      <!-- Set each video id so that it corresponds with the `data-idx`
      So if slide <li> is data-idx="1", then video id="vid1"-->

      <video id="vid1" class="vid" src="http://techslides.com/demos/sample-videos/small.mp4" controls></video>
    </li>
    <li data-idx="2">
      <img src="http://dummyimage.com/640x360/000/fc0.png&text=3">
    </li>
    <li data-idx="3">
      <img src="http://dummyimage.com/640x360/000/0ff.png&text=4">
    </li>
    <li data-idx="4">
      <img src="http://dummyimage.com/640x360/000/b52.png&text=5">
    </li>

  </ul>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.js"></script>
  <script>
    var bx = $(".bx").bxSlider({
      pager: false,
      nextText: '',
      prevText: '',
      infiniteLoop: false,
      /*
      This callback will fire a function 
      before a slide completes it's
      course to it's destination
      */
      onSlideBefore: autoPlay
    });
    /*
    This function just uses the `to` parameter
    I put all of them there because bxSlider expects 
    them there, I have bad luck if I don't... don't ask:P
    */
    function autoPlay($ele, from, to) {
      /* 
      idx is the slide index number
      if there is a video within 
      the slide then play it.
      */
      var idx = parseInt(to, 10);
      var vid = document.querySelector('#vid' + idx);

      if (vid) {
        vid.play();
      }
    }
  </script>
</body>

</html>

【讨论】：

谢谢，这解决了我的问题。 OnSlideBefore，在 slideafter 上执行此操作是错误的 >_
不客气，先生。是的，我也学到了宝贵的一课，经过 3 年的大量使用和不断的修改，我还没有成功使用 onSlideAfter。
有没有人遇到过这个在 Chrome 中不起作用的问题。在其他任何地方播放。
@RyanSwanson 将 bxSlider 文件从 v.4.2.5 更新到 v.4.2.14，感谢您的提醒。如果您仍然遇到任何问题，请告诉我。

【解决方案2】：

如果您想要播放节目中的第一张幻灯片，您可以使用 onSliderLoad() 来实现 - 并使用包装器方法让两者都工作。

 <script type="text/javascript">
$(document).ready(function(){
  $('.bxslider').bxSlider({
    video: true,
    onSliderLoad: autoPlay,
    onSlideBefore: autoPlayWrapper
  });
});

// Calls the autoPlay function with the index of the next slide
function autoPlayWrapper(asdf,asdf,index){
  autoPlay(index);
}

// play the video in the slide at index
function autoPlay(index){
  var idx = parseInt(index,10);
  var vid = document.querySelector("#vid"+idx);
  if(vid){
    vid.play();
  }
}
</script>

【讨论】：