如何获得播放按钮以触发视频播放操作?
How do I get the play button to trigger the video play action?
在这个页面上我有两个 div,div-1 与另一个重叠 div-2 http://55-corinthian-drive.webflow.io/home-video-wip
Div-1 包含播放按钮(以及大图像和文本),单击播放按钮 div-1 会关闭显示 div-2,其中包含 Vimeo视频。我希望视频在单击按钮后开始播放,但无法正常播放。下面是我用于删除 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>
尝试 'on click' 事件而不是点击事件,因为您正在动态附加 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>');
})
在这个页面上我有两个 div,div-1 与另一个重叠 div-2 http://55-corinthian-drive.webflow.io/home-video-wip
Div-1 包含播放按钮(以及大图像和文本),单击播放按钮 div-1 会关闭显示 div-2,其中包含 Vimeo视频。我希望视频在单击按钮后开始播放,但无法正常播放。下面是我用于删除 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>
尝试 'on click' 事件而不是点击事件,因为您正在动态附加 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>');
})