0

I'm creating a video like this, based on this CodePen:

export function createVideoFromBinary(src, mimeType = 'video/mp4') {
    let $video = $(`<video autoplay loop/>`);
    let $source = $(`<source type="${mimeType}"/>`);
    let blob = new Blob([src], {type: mimeType});
    let urlCreator = window.URL || window.webkitURL;
    let objUrl = urlCreator.createObjectURL(blob);
    $source.attr('src', objUrl);
    $video.append($source);
    return $video.get(0);
}

I'm preloading the video with PreloadJS:

this.m_queue.loadFile({id: 'story1.womanOnBeach', src: 'res/img/story1/woman-on-beach.mp4', type: createjs.AbstractLoader.BINARY});

I'm using it like this:

let womanOnBeachVideo = PreloadedAssets.story1_womanOnBeach.cloneNode(true);
womanOnBeachVideo.autoplay = true;
this.container.appendChild(womanOnBeachVideo);

This video's first frame shows up, however the video doesn't play (the actual video I'm loading isn't a static image). Any insight on why?

Update

The video plays if I put the controls attribute and play it manually, or if I programatically click it (video.click()). Is there a better way or is that it?

Hydroper
  • 344
  • 2
  • 9

1 Answers1

1

Modern browsers restrict the use of autoplay. Generally, a video will autoplay only if it's muted, its volume is 0, or when the user takes some action to initiate the video.

MDN goes into more depth with its Autoplay guide.

Dre G
  • 56
  • 6