我正在基于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);
}
我正在使用PreloadJS预加载视频:
this.m_queue.loadFile({id: 'story1.womanOnBeach', src: 'res/img/story1/woman-on-beach.mp4', type: createjs.AbstractLoader.BINARY});
我是这样使用它的:
let womanOnBeachVideo = PreloadedAssets.story1_womanOnBeach.cloneNode(true);
womanOnBeachVideo.autoplay = true;
this.container.appendChild(womanOnBeachVideo);
这个视频的第一帧出现了,但是视频没有播放(我加载的实际视频不是一个静态图像)。
更新
如果我放置controls
属性并手动播放它,或者如果我以编程方式单击它(video.click()
),视频就会播放。有更好的方法吗?
1条答案
按热度按时间v7pvogib1#
现代浏览器限制了自动播放的使用。通常,只有当视频被静音、音量为0或用户采取某些操作启动视频时,视频才会自动播放。
MDN的Autoplay guide更有深度。