javascript - 播放完毕后如何卸载视频?

标签 javascript jquery css

我正在尝试在视频播放完毕后将其卸载。到目前为止没有运气。有人可以帮忙吗? JSFIDDLE example here

$(document).ready(function(){
    $('#video').on('ended',function(){
      $('#video').get(0).unload();
    });
});

最佳答案

我已将解决方案包含在 jsfiddle 和下面的代码片段中。请注意,我使用的是 .toggle() 而不是 .unload(),因为 .unload() 是在窗口事件上触发的:

https://jsfiddle.net/firelite/h4aqkgo1/

$('#videoButton').on('click', function() {
  var videoDiv = $('#videoDiv').toggle();

  if (videoDiv.is(':visible')) {
    $('#video').get(0).load();
    $('#video').get(0).play();
  } else {
    $('#video').get(0).pause();
  }
});

$(document).ready(function() {
  $('#video').on('ended', function() {
    $('#video').get(0).pause();
    $('#videoDiv').toggle();
  });
});
#videoDiv {
  width: 100%;
  height: 360px;
  position: relative;
}
#videoBlock,
#videoMessage {
  width: 100%;
  height: 360px;
  position: absolute;
  top: 0;
  left: 0;
}
.videoClick {
  text-align: center
}
.videoClick a {
  color: white;
  background-color: rgba(241, 241, 241, 0.25);
  font-size: 1.7em;
  cursor: pointer;
  cursor: hand
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="videoButton">Toggle video</button>
<div id="videoDiv" style="display:none">
  <div id="videoBlock">
    <video preload="preload" id="video">
      <source src="https://static.webshopapp.com/shops/054833/files/093143183/fotel-photography-course-tour-workshop-video-4.mp4" type="video/mp4">
    </video>
  </div>
</div>

关于javascript - 播放完毕后如何卸载视频?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40774349/

相关文章:

javascript - Mocha 和应该断言并没有按预期工作

javascript - 显然 JSON.parse 比声明对象字面量更快。如果是这样的话,为什么我的结果显示不一样?

javascript - 如何更新 redux 状态而不遇到错误

javascript - React Mobile 打开时带有按钮,但不是可点击的组件

css - reactstrap <UncontrolledDropdown> 正在离开视口(viewport),mr/ml-auto 和 float-right/left 不工作

html - Bootstrap 如何在移动设备上使 NavBar 上的图标不消失

jquery - 点击后如何自定义<a href ="#link">页内链接相对于页面顶部的位置?

javascript - 通过 jQuery 调用使用 Raphaël

javascript - 如何防止在输入字段中写入和粘贴特殊字符?

javascript - 如何将 React.Component 放入 CSS 内容属性(在 :before/:after pseudo-elements)?