Javascript - иконка смены видеоплеера при нажатии

Question

У меня есть обычный c видеоплеер, видео работает, и он меняет значок воспроизведение / пауза при нажатии на значках .

Что это функция воспроизведения / паузы видео и изменения значков при нажатии на видео (экране) ?

-Я пробовал: * От 1014 *

<video onclick="function()">

до воспроизведение / пауза видео но значки не меняются и работают только один раз.

HTML:

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