javascript演習 １１日目/３０日

覚えたこと

videoタグ

paused と　pause()

if(video.paused){
        video.play();
    }else{
        video.pause();
}

//こうも書ける

const method = video.paused ? 'play' : 'pause';
video[method]();

video.currentTime　と　this.dataset

<button data-skip="-10" class="player__button">« 10s</button>
<button data-skip="25" class="player__button">25s »</button>

<script>
function skip(){
video.currentTime += parseFloat(this.dataset.skip);
}
</script>

name属性を使って連動させる

<input type="range" name="volume" min="0" max="1" step="0.05" value="1">
<input type="range" name="playbackRate" min="0.5" max="2" step="0.1" value="1">

<script>
function handleRangeUpdate(){
    video[this.name] = this.value;
}
</script>

video.duration　と　cssのflex-basis

function handleProgress(){
    const percent = (video.currentTime / video.duration) * 100;
    progressBar.style.flexBasis = `${percent}%`;
}

video.addEventListener('timeupdate', handleProgress);

その他

function scrub(e){
    const scrubTime = (e.offsetX / progress.offsetWidth) * video.duration;
    video.currentTime = scrubTime;
}

あとaddEventListener　の　mousedown　とか　mouseupとか

~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ ~ーーー
参考