Html5 视频未在 bxslider 上播放

Question

目前我有一个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}

谢谢

Answer 1

您只需使用回调 onSlideBefore()。评论中的源代码中有更多详细信息。

片段

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

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

Html5 视频未在 bxslider 上播放

Html5 video not playing on bxslider

html

javascript

html5-video

bxslider

片段