jsonからランダムに動画を選んでdomに追加して再生するJavaScript

example.js

import randomVideo from 'random-video';
randomVideo('#js-random-video', '/sample.json');

random-video.js

import axios from 'axios';
const getRand = (a, b) => ~~(Math.random() * (b - a + 1)) + a;

export default (selector, url) => {
  axios.get(url).then((item) => {
    const data = item.data;
    const index = getRand(0, data.length -1);
    const target = data[index];
    const poster = target.poster;
    const source = target.source;
    let html = `<video autoplay muted loop playsinline webkit-playsinline poster="${poster}">`;
    source.forEach((src) => {
        html += `<source src="${src}">`;
    })
    html += `</video>`;
    document.querySelector(selector).innerHTML = html;
  });
}

sample.json

[
    {
        "poster": "/***/***.png",
        "source": [
            "/***/***.mp4",
            "/***/***.webm"
        ]
    },
    {
        "poster": "/***/***.png",
        "source":[
            "/***/***.mp4",
            "/***/***.webm"
        ]
    },
    {
        "poster": "/***/***.png",
        "source":[
            "/***/***.mp4",
            "/***/***.webm"
        ]
    }
]

https://css-tricks.com/how-to-fix-video-slowing-down-page-load-time/

document.addEventListener('DOMContentLoaded',() => {
  randomVideo('#js-random-video', '/sample.json');
});