videoタグの動画サンプル

<video src="/s/video/traffic.mp4"></video>

<video src="/s/video/traffic.mp4" controls></video>

<video src="/s/video/traffic.mp4" autoplay muted></video>

<video src="/s/video/traffic.mp4" poster="/s/video/trafifc_poster.jpg" autoplay muted loop playsinline></video>

用の動画を読み込んでいます。

<video data-src="/s/video/traffic_sp.mp4" poster="/s/video/trafifc_poster.jpg" id="movieSP" autoplay muted loop playsinline></video>
<video data-src="/s/video/traffic.mp4" poster="/s/video/trafifc_poster.jpg" id="moviePC" autoplay muted loop playsinline></video>

const ua = navigator.userAgent.toLowerCase()
const isSP = /android.+mobile|ipod|iphone/.test(ua)
const r = document.getElementById('r')
const movieSP = document.getElementById('movieSP')
const moviePC = document.getElementById('moviePC')
if (isSP) {
  movieSP.setAttribute('src', movieSP.dataset.src)
  moviePC.style.display = 'none'
} else {
  moviePC.setAttribute('src', moviePC.dataset.src)
  movieSP.style.display = 'none'
}
r.textContent = isSP ? 'スマートフォン' : 'パソコン'

元記事を表示する