Question

我有一个几年前为我创建的滑块。滑块使用计时器支持图像和视频，但是计时器同时支持两者，因此，例如，如果我将计时器设置为每10秒运行一次，它将每10秒旋转一次滑块。我面临的问题是，如果视频未完成，它将在10秒钟后切断视频。

我想做的是获取视频的时长，然后在播放视频时暂停滑块。视频结束事件触发后，恢复滑块。我相信可以使用以下命令暂停滑块：

_this.find（'。playpause'）。trigger（'click'）;

我认为这是需要修改的地方。

tag_html += '" autoplay>';
if (objtags[tag].source != undefined) {
    for (source in objtags[tag].source) {
        tag_html += '<source src="' + objtags[tag].source[source] + '" type="video/' + source + '">';

        // get the duration of the video and pause slider when video is playing for the duration of the video.
        _this.find('.playpause').trigger('click');


       // when video ended event triggers, resume continue slider.
        _this.find('.playpause').trigger('click');

    }

}

这是我想出的方法（谷歌搜索）来获取视频时长。

    // Get video duration (length)
    var video = $('');
    var source = $('');
    $(source).appendTo(video);
    $(source).attr('src', objtags[tag].source[source]);
    $(source).attr('type', 'video/mp4');
    var videoDuration = $(video).duration;
    var videoDuration = document.querySelector('video').duration;
    console.log(videoDuration);

谢谢！任何帮助将不胜感激！

这是完整的js代码： https://jsfiddle.net/wxvynp09/

Answer 1

您将要创建一个保存视频状态的变量和一个设置视频状态的功能。在<video>标签内，您可以让onplay和onpause设置视频状态。

根据您在问题中包含的jsFiddle：

在第308-336行上，如果obj_data[i].tags[tag].name == 'video'包含<video>和<source>标签。
- 在第309行上，您可以包括 onplay和onpause事件。
- 将其设置为tag_html += '<' + obj_data[i].tags[tag].name + 'onplay="setVideoState(true)" onpause="setVideoState(pause)" width="';
在第210到216行中，autoSlide被分配给一个自动滑动滑块的间隔。
- 修改 setInterval，因此，如果视频不正在播放，则只能调用auto_slide_fun。

LINK TO JSFIDDLE

来源：

onplay和onpause使用示例

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<video width="320" height="240" id="video" controls autoplay onplay="setVideoState(true)" onpause="setVideoState(false)">
  <source src="https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
</video>

<script>
  var videoPlaying = false;
  function setVideoState(state){
       videoPlaying = state;
       console.log('videoPlaying: ',videoPlaying);
  }
  
  function auto_slide(){
    console.log("auto_slide function called!");
  }
  
  setInterval(function(){
    // only call auto_slide function if the video is NOT playing
    if(!videoPlaying){
      auto_slide();
    }
  }, 2500);
  
  
</script>

出现视频时暂停滑块

1 个答案:

onplay和onpause使用示例