我目前有一个网页,其中嵌入了YouTube视频和图片叠加层,可用作播放按钮。"我使用JavaScript播放嵌入视频,并在用户点击图片叠加层时隐藏图片。据我所知,唯一的方法是添加"& autoplay = 1"到youtube视频的网址。
此外,我在网页上有一个表单,用户可以提交该表单以向我们发送信息。如果表单提交正确,则需要用户“谢谢”#34;页。问题出在用户点击感谢页面上的后退按钮时。因为我添加了"& autoplay = 1"到iFrame,视频继续播放。我已经尝试通过在处理表单的if / else语句的else部分中回显JavaScript来重置iFrame src。另外,我对此并不完全确定,但我认为后退按钮会触发.click()方法,所以我不确定如果它像对待按钮一样处理所有内容,我将如何防止这种情况发生。我已经坚持了很长一段时间,并希望有一些可能的方向。我也开始相信我想要实现的目标可能并非完全可能。
相关代码:
<?PHP
if(isset($_POST['submit'])) {
if($error) {
// handle form error
}
else {
// mails the form
header("location:http://mywebsite.com/thank-you");
}
}
?>
<html>
<body>
<div id="video-thumbnail">
<img id="video-image" src="norman.png" class="video-image" alt=""/>
<iframe id="video-embed" class="video-embed" frameborder="0" allowfullscreen="" src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&color=white&controls=1&loop=1&showinfo=0" s8011508427261248624="true" replaced="true" ></iframe>
</div>
<script>
(function($){
$(document).ready( function(){
$(".video-image").click(function(){
$(".video-embed").css({"opacity":"1","display":"block"});
$(".video-embed")[0].src += "&autoplay=1";
$(this).unbind("click");
});
} );
})(jQuery)
</script>
</body>
</html>
答案 0 :(得分:0)
您可以检测是否按下了后退按钮:如果是,请不要为您的视频设置自动播放。
var backButtonPressed = false;
$(function () {
if (window.history && window.history.pushState) {
window.history.pushState('forward', null, './#forward');
$(window).on('popstate', function () {
backButtonPressed = true;
});
}
$(".video-image").click(function () {
$(".video-embed").css({"opacity": "1", "display": "block"});
// test if back button pressed
if (backButtonPressed == false) {
$(".video-embed")[0].src += "&autoplay=1";
}
$(this).unbind("click");
});
});
答案 1 :(得分:0)
我在gaetanoM的帮助下解决了我自己的问题。他的答案很好,只是在函数开始时缺少重置iFrame src所需的一行来摆脱“&amp; autoplay = 1”
var backButtonPressed = false;
$(function () {
$(".video-embed")[0].src = "https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&color=white&controls=1&loop=1&showinfo=0";
if (window.history && window.history.pushState) {
window.history.pushState('forward', null, './#forward');
$(window).on('popstate', function () {
backButtonPressed = true;
});
}
$(".video-image").click(function () {
$(".video-embed").css({"opacity": "1", "display": "block"});
// test if back button pressed
if (backButtonPressed == false) {
$(".video-embed")[0].src += "&autoplay=1";
}
$(this).unbind("click");
});
});