Javascript - 视频播放器在点击时改变图标

Question

我有一个基本的自定义视频播放器，视频工作，它改变了。暂停 图标时，点击 在图标上.

职能是什么？暂停 视频，并改变图标，当点击 画面上?

-我已经试过了:

<video onclick="function()">

我已经试过了 暂停 该视频 不过 图标不会改变，而且只能用一次。

HTML.CSS

<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>

CSS:

.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;
}

JS:

//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';
    }
}

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>