videoを自動再生設定してるけど、最初は音を出したくない。
けど音を出したい人はボタンを押して音声ONにしてね〜っていう仕様にするときのコードメモ。
jQueryは使わず、JavaScriptで記述。
HTML
<div class="video">
<video id="videoBtn" src="assets/video/video.mp4" autoplay muted loop playsinline></video>
<span id="videoMute" class="video-mute"></span>
<div class="video-btn" onclick="mvvideo();"><img src="assets/images/svg/video-mute.svg" alt="音声ON/OFF"></div>
</div>SCSS
.video{
max-width: 1000px;
width: 100%;
margin-left: auto;
margin-right: auto;
position: relative;
.video-mute{
opacity: 0;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
.video-btn{
position: absolute;
z-index: 10;
bottom: 100px;
right: 0;
width: 40px;
height: 40px;
cursor: pointer;
img{
width: 100%;
}
}
video{
width: 100%;
}
}JavaScript
let count = 0;
const mvvideo = () => {
(videoBtn.muted) ? videoBtn.muted = false : videoBtn.muted = true
// 現在の状態を表示
videoMute.innerHTML = videoBtn.muted
}参考サイト
下記サイトを参考にさせてもらいました！
ありがとうございます。
