Question

由于缺乏定位和jQuery的知识，我一直试图连接点数天。我让代码搞得一团糟。我试图点击那里的图标播放视频。我发现我的代码存在这些问题

该代码首次运行但视频关闭后仍然有效。我不能再点击再玩一次。
播放按钮没有响应，它在移动视图中与文本重叠，而我希望它是静态的但是反应灵敏
由于按钮位置，从左上角开始，左边50％显示水平滚动条。

由于我打算在其他页面和相同目的上使用相同的jQuery代码，我可以使它更智能，而不是再写所有代码或复制粘贴吗？以下是代码，这里是codepen

$(document).ready(function() {
    $(".netball-intro").click(function() {
    //jQuery(".sports-video").css("display", "block")
    //jQuery("#bgvid").toggleClass("is-not-active");
    $(".fullscreen").toggleClass("is-video-active");
    $("#netball-intro").get(0).play();
            $(".fullscreen").click(function(){
            $(this).addClass('hidden');
            });
        });

    $(".interview").click(function() {
    //jQuery(".sports-video").css("display", "block")
    //jQuery("#bgvid").toggleClass("is-not-active");
    $(".fullscreen").toggleClass("is-video-active");
    $(".interview").get(0).play();
            $(".fullscreen").click(function(){
            $(this).addClass('hidden');
            });
        });
    });

Answer 1

如果您在其他页面上使用的是jQuery，我想您也在使用HTML。我相信我已经使用.click方法在HTML上做了类似的事情，并且还通过...实现了“控件循环”。

<video width="320" height="240" controls loop>
    <source src="movie.mp4" type="video/mp4">
    <source src="movie.ogg" type="video/ogg">
</video>

单击按钮后，它将连续循环，并且应消失。

视频在第一次播放后不会播放

1 个答案: