javascript - Javascript - 点击时视频播放器更改图标

Question

我有一个基本的自定义视频播放器，该视频可以正常工作，并且在单击图标时会更改播放/暂停图标。

单击视频（屏幕）时播放/暂停视频和更改图标的功能是什么？

-我试过了 ：

<video onclick="function()">

播放/暂停视频，但图标不会改变，它只能工作一次。

代码：

//buttons:
let playBtn = document.querySelector('.play-btn');
let pauseBtn = document.querySelector('.pause-btn');
//video:
let video = document.getElementById('main-video');

//play function:
const playVideo = () => {
    if(video.pause){
        video.play();
        pauseBtn.style.display = 'inline-block';
        playBtn.style.display = 'none';
    } 
}
//pause function:
const pauseVideo = () => {
    if(video.play){
        video.pause();
        playBtn.style.display = 'inline-block';
        pauseBtn.style.display = 'none';
    }
}

.video-block {
    display: flex;
    flex-wrap: wrap;
}
.media-box {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    bottom: 0;
    width: 100%;
    background-color: rgba(255, 0, 0, 0.34);
    z-index: 2;
}

.box-btns button {
    background: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    padding: 9px 15px;
}
.box-btns i{
    width: 35px;
    height: 35px;
    font-size: 2.5rem;
    color: #eeeef0;
    display: flex;
    justify-content: center;
    align-items: center;
}


.pause-btn {
    display: none;
}

<div class="video-block">

<!--Video-->
    <video id="main-video" src="../css/abc.mp4"></video> 

<!--Media control-->
    <div class="media-box">
        <div class="box-btns">
            <button onclick="playVideo()" class="play-btn">
                <i class="ion-play"></i>
            </button>                                    
            <button onclick="pauseVideo()" class="pause-btn">
                <i class="ion-pause"></i>
            </button>
        </div> 
    </div> 

</div>

标签： javascripthtmljquerycssweb-deployment

Answer 1

您可以尝试使用onclick侦听器访问它：

<video height="auto" controls="controls" preload="none" onclick="this.paused?this.play():this.pause()">
 <source type="video/mp4" src="vid.mp4">
</video>

使用上面的代码（尽管您的 CSS 看不到播放暂停）

//buttons:
let playBtn = document.querySelector('.play-btn');
let pauseBtn = document.querySelector('.pause-btn');
//video:
let video = document.getElementById('main-video');

//play function:
const playVideo = () => {
    if(video.pause){
        video.play();
        pauseBtn.style.display = 'inline-block';
        playBtn.style.display = 'none';
    } 
}
//pause function:
const pauseVideo = () => {
    if(video.play){
        video.pause();
        playBtn.style.display = 'inline-block';
        pauseBtn.style.display = 'none';
    }
}

.video-block {
    display: flex;
    flex-wrap: wrap;
}
.media-box {
    position: absolute;
    display: flex;
    flex-wrap: wrap;
    bottom: 0;
    width: 100%;
    background-color: rgba(255, 0, 0, 0.34);
    z-index: 2;
}

.box-btns button {
    background: none;
    border: 0;
    outline: 0;
    cursor: pointer;
    padding: 9px 15px;
}
.box-btns i{
    width: 35px;
    height: 35px;
    font-size: 2.5rem;
    color: #eeeef0;
    display: flex;
    justify-content: center;
    align-items: center;
}


.pause-btn {
    display: none;
}

<div class="video-block">

<!--Video-->
    <video id="main-video" src="https://www.w3schools.com/html/mov_bbb.mp4" onclick=this.paused?this.play():this.pause()></video> 

<!--Media control-->
    <div class="media-box">
        <div class="box-btns">
            <button onclick="playVideo()" class="play-btn">
                <i class="ion-play"></i>
            </button>                                    
            <button onclick="pauseVideo()" class="pause-btn">
                <i class="ion-pause"></i>
            </button>
        </div> 
    </div> 

</div>