The custom button on the video element in google cannot be heard.

<div class="video_wrapper" style="height: 900px; width: 1200px;">
            <div class="control"><button title="Play"></button></div><video id="movie">
                <source src="myvideo.mp4" type="video/mp4">
                <source src="myvideo.ogv" type="video/ogg">
                <source src="myvideo.webm" type="video/webm">
                <object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
                    <param name="movie" value="myvideo.swf">
                    <param name="flashvars" value="autostart=true&file=myvideo.swf">
                </object>
                 video: <a href="myvideo.webm"></a>
            </video>
        </div>
< hr >

play.addEventListener ("click",function () {

)
    alert(123);
    if (vid.ended) {
        vid.currentTime = 0;
        
    }
    if (vid.paused) {
        vid.play();
    }else{
        vid.pause();
    }
});

clipboard.png

Yellow is a video button that cannot be selected at all, but can be used in edge Firefox ie.

Mar.18,2021

add a z-index to try


it should be a js attribute compatibility problem or style suggestion to debug the results

Menu