<video id="video" controls="controls" style="display: none;">
    <source src="https://xxx.com/vid_159411468092581" />
</video>
<canvas  id="myCanvas"  width="460"  height="270"  style="border: 1px solid blue;"  ></canvas>
<div>
    <button id="playBtn">播放</button>
    <button id="pauseBtn">暂停</button>
</div>

const video = document.querySelector("#video");
const canvas = document.querySelector("#myCanvas");
const playBtn = document.querySelector("#playBtn");
const pauseBtn = document.querySelector("#pauseBtn");
const context = canvas.getContext("2d");
let timerId = null;
function draw() {
    if (video.paused || video.ended) return;
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.drawImage(video, 0, 0, canvas.width, canvas.height);
    timerId = setTimeout(draw, 0);
}
playBtn.addEventListener("click", () => {
    if (!video.paused) return;
    video.play();
    draw();
});
pauseBtn.addEventListener("click", () => {
    if (video.paused) return;
    video.pause();
    clearTimeout(timerId);
});

brew install ffmpeg

$ ffmpeg -i input.mp4 -f mpegts \
         -codec:v mpeg1video -s 640x360 -b:v 1500k -r 25 -bf 0 \
         -codec:a mp2 -ar 44100 -ac 1 -b:a 64k \
         output.ts