jquery - 如何获得播放按钮来触发视频播放动作?
问题描述
在此页面上,我有两个 div,div-1 与另一个 div-2 http://55-corinthian-drive.webflow.io/home-video-wip重叠
Div-1 包含播放按钮(以及大图像和文本),单击播放按钮 div-1 会关闭显示包含 Vimeo 视频的 div-2。我希望视频在单击按钮后开始播放,但无法正常工作。下面是我删除 div-1 的脚本,效果很好。我已经看过这个想法https://jsfiddle.net/ELHCm/但无法让它发挥作用,正在尝试 $("#id").vimeo("play"); 现在。
<!-- triggering div -->
<div class="video-trigger-wrap">
<h1 class="header">text to remove on click</h1>
<div class="video-trigger"></div>
</div>
<!-- video -->
<div class="div-block-23 position-vid">
<div id="w-node-df98048f0945" class="video-4 w-video w-embed">
<iframe id="g-vid" src="video-address" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
<script>
$(document).ready(function(){
$(".video-trigger").click(function(){
$(".video-trigger-wrap").toggle();
$("#player").vimeo("play");
});
});
</script>
Also tried the following, as suggested by Charan below, but has not worked.
<script>
$(document).ready(function(){
$(".video-trigger").click(function(e){
e.preventDefault();
$(".video-trigger-wrap").toggle();
$("#g-vid").vimeo("play");
});
});
</script>
解决方案
尝试“点击”事件而不是点击事件,因为您正在动态附加 iframe
$('a').on('click',function(e) {
e.preventDefault();
$('#video_container').html('<iframe src="https://player.vimeo.com/video/12345?title=1&byline=1&portrait=1&autoplay=true" width="643" height="360" frameborder="0"></iframe>');
})
推荐阅读
- ruby-on-rails - CarrierWave 未上传到 EC2 服务器
- algorithm - 获取电子表格上矩形区域的 A1Notation
- python - 比较分子列表的相似性
- tensorflow - 无法在 Ubuntu 16.04LTS 上通过 bazel 构建 tensorflow 1.4
- python - 如何在 Python 中跨两个不同进程共享数据
- javascript - 嵌套范围内的 JavaScript 变量在范围外不会出错
- php - 如何在会话消息中显示可验证的值?
- html - 溢出:滚动在我的响应式菜单上不起作用。该怎么办?
- find - 查找文件并更改权限,忽略目录
- sapui5 - SAPUI5 获取特定子账户的所有注册用户