video

JSでPC・SPでの動画の切替

CSSでやるのはNG。（display:noneとか）

sourceで動画切替できるかと思ったのですが、実機SP（iPhone8/iOS14）で表示できず・・。

videoタグ自体のsrcで切替します。

code:video.html

/* NG例＞sourceで切替 */

<video muted autoplay playsinline preload="none" class="videoChange">

<source data-src="video_sp.mp4" data-query="mobile">

<source data-src="video_sp.mp4" data-query="pc">

</video>

/* OK */

<video muted autoplay playsinline preload="none" id="video"></video>

code:video.js

document.addEventListener('DOMContentLoaded', function () {

const video = document.getElementById('video');

let videoUrlSP = 'video_sp.mp4';

let videoUrlPC = 'video_pc.mp4';

if(device === 'sp'){ //要：別途デバイス判定

video.src = videoUrlSP;

}else {

video.src = videoUrlPC;

}

video.load();

video.play();

});

とかならOK。