第一次播放后视频无法播放 [英] Video wont play after first time playing

问题描述

几天来我一直试图将点连接起来，但是由于缺乏对定位和jQuery的了解.我把代码弄得一团糟.我正在尝试单击那里的图标来播放视频.我发现我的代码有这些问题

I have been trying to connect the dots for days but due to lack of my knowledge in positioning and jQuery . I am making code a mess. I am trying to play video on click on there icons. I find these problem with my code

1. 该代码首次生效，但在视频关闭之后.我无法单击以再次播放或播放另一张.
2. 播放"按钮没有响应，在移动视图中它与文本重叠，而我希望它为静态但具有响应性
3. 由于按钮的位置，在顶部和左侧的中央，左侧的50％使得水平滚动条出现.

由于我打算在其他页面上使用相同的jQuery代码并达到相同的目的，因此我可以使其变得更聪明并且不编写所有代码或再次复制粘贴吗?以下是代码，这是 codepen

As i intend to use same jQuery code on other pages and same purpose, can i make it smarter and not write all code or copy paste again? Following is the code and here is the 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');
            });
        });
    });

推荐答案

如果您在其他页面上使用jQuery，我想您也在使用HTML.我相信我已经使用.click方法对HTML进行了类似的操作，还对"controls loop"进行了控制.与...

If you're using jQuery on other pages, I presume you are also using HTML. I believe I've done a similar thing with HTML with the .click method and also "controls loop" with...

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

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

This would continually loop after the button is clicked, and should disappear.

这篇关于第一次播放后视频无法播放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！