如何使用自定义播放Btn逐个播放视频

Question

我有一些卡在我的页面是有2个类型的卡片(视频和Pdf)，pdf类型的图像，但视频类型没有图像。它有视频

​

我试过了，这样就可以用js来玩了，但是只有一个视频可以播放。另外一张牌上的按钮也不起作用。

视频。和玩-btn有相同的身份

var playButton = document.getElementById("play_button");
var video = document.getElementById("myVideoPlayer");
playButton.addEventListener("click", function() {
    if (video.paused == true) {
        // Play the video
        video.play();
    } else {
        video.pause();
    }
});

html +

<div class="row container-fluid mt-10">
            {foreach $model->categories as $key => $category}
                {if !empty($category["files"])}
                        {foreach $category["files"] as $file}
                                {if $file["ispdf"] == true}


                                    <div class="col-6 mb-4 col-md-6 col-lg-4 col-xl-3">
                                        <div class="card shadow rounded-4 overflow-hidden">
                                            <div class="position-relative w-100 h-100">
                                                <div class="position-relative overflow-hidden">
                                                    <span class="mh-250px h-100 w-100 mw-550px bg-opacity-25 bg-dark position-absolute z-index-2 back-blur04"></span>
                                                    <img src="assets/image/pdf-bg.png" alt="" class="mh-250px h-100 w-100 obj-cover" >
                                                </div>
                                            
                                                <a href="{$file["filename"]}" class="icon svg-icon svg-icon-3tx text-white position-absolute z-index-3 start-50 top-50 translate-middle">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-download transition-03 scale-btn" viewBox="0 0 16 16">
                                                        <path d="M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2v-2.5a.5.5 0 0 1 .5-.5z"/>
                                                        <path d="M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 1 0-.708.708l3 3z"/>
                                                    </svg>
                                                </a>
                                                
                                                <a href="{$file["filename"]}" target="_blank" class="icon svg-icon svg-icon-3 m-3 text-white position-absolute z-index-3 end-0 bottom-0">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-box-arrow-up-right transition-03 scale-btn-sm" viewBox="0 0 16 16">
                                                        <path fill-rule="evenodd" d="M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z"/>
                                                        <path fill-rule="evenodd" d="M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z"/>
                                                    </svg>
                                                </a>
                                            </div>

                                            <div class="p-6 ">
                                                <a href="#" class="m-0 text-dark text-hover-primary fs-5 fw-bold d-block">{$file["title"]}</a>
                                                <span class="text-muted align-middle">Grüße: 0 KB</span>
                                            </div>

                                        </div>
                                    </div>

                                {else}
                                    <div class="col-6 mb-4 col-md-6 col-lg-4 col-xl-3">
                                        <div class="card shadow rounded-4 overflow-hidden">
                                            <div class="position-relative w-100 h-100">
                                                <div class="position-relative overflow-hidden">
                                                    <span class="mh-250px h-100 w-100 mw-550px bg-opacity-25 bg-dark position-absolute z-index-2 back-blur04" id="play-highlight"></span>
                                                    <video  class="mh-250px h-100 w-100 obj-cover" playsinline id="myVideoPlayer">
                                                        <source src="https://mdn.github.io/learning-area/html/multimedia-and-embedding/video-and-audio-content/rabbit320.mp4" type="video/mp4" class="mh-250px h-100 w-100">
                                                        Ihr Browser kann dieses Video nicht wiedergeben.<br/>
                                                        Dieser Film zeigt eine Demonstration des video-Elements.
                                                        Sie können ihn unter <a href="#">Link-Addresse</a> abrufen.
                                                    </video>
                                                </div>
                                                <a class="icon svg-icon svg-icon-5tx text-white position-absolute z-index-3 start-50 top-50 translate-middle" id="play_button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill transition-03 scale-btn" viewBox="0 0 16 16">
                                                        <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"/>
                                                    </svg>
                                                </a>

                                                <a class="icon svg-icon svg-icon-1 m-3 text-white position-absolute z-index-3 end-0 bottom-0" id="videofull_button">
                                                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-fullscreen transition-03 scale-btn-sm" viewBox="0 0 16 16">
                                                        <path d="M1.5 1a.5.5 0 0 0-.5.5v4a.5.5 0 0 1-1 0v-4A1.5 1.5 0 0 1 1.5 0h4a.5.5 0 0 1 0 1h-4zM10 .5a.5.5 0 0 1 .5-.5h4A1.5 1.5 0 0 1 16 1.5v4a.5.5 0 0 1-1 0v-4a.5.5 0 0 0-.5-.5h-4a.5.5 0 0 1-.5-.5zM.5 10a.5.5 0 0 1 .5.5v4a.5.5 0 0 0 .5.5h4a.5.5 0 0 1 0 1h-4A1.5 1.5 0 0 1 0 14.5v-4a.5.5 0 0 1 .5-.5zm15 0a.5.5 0 0 1 .5.5v4a1.5 1.5 0 0 1-1.5 1.5h-4a.5.5 0 0 1 0-1h4a.5.5 0 0 0 .5-.5v-4a.5.5 0 0 1 .5-.5z"/>
                                                    </svg>
                                                </a>
                                            </div>

                                            <div class="p-6 ">
                                                <a href="#" class="m-0 text-dark text-hover-primary fs-5 fw-bold d-block">Schulungsvideo: Inventur-Aufnahme</a>
                                                <span class="text-muted align-middle" id="video-duration">Dauer: 9 Minuten</span>
                                            </div>

                                        </div>
                                    </div>
                                {/if}
                        {/foreach}
                {/if}
            {/foreach}

Answer 1

对视频和按钮使用不同的ids：

var playButton1 = document.getElementById("play_button1");
var video1 = document.getElementById("myVideoPlayer1");
playButton1.addEventListener("click", function() {
    if (video1.paused == true) {
        // Play the video
        video1.play();
    } else {
        video1.pause();
    }
});

var playButton2 = document.getElementById("play_button2");
var video2 = document.getElementById("myVideoPlayer2");
playButton2.addEventListener("click", function() {
    if (video2.paused == true) {
        // Play the video
        video2.play();
    } else {
        video2.pause();
    }
});