Here is an example of a video that will cover the whole window and autoplay, on a loop. It's created on demand via JavaScript.
I needed this for a video that should only load and play when requested, i.e. not on every load of the page. (Hiding the element with display: none; won't do, because the video then still loads even if not displayed.)
JavaScript
/**
* Create the video.
*
* An alternative might have been to use an HTML template tag inside the Twig template,
* to then create an element and append it. But this worked only in Chrome:
* - in Firefox, `autoplay loop muted` (inside the ) get converted to
* `autoplay="" loop="" muted=""` (in the Inspector) and there's no playback.
* - in Safari, nothing happens.
*
* Another alternative (that worked this one) is to just append the whole HTML as a
* single string, but it's harder to read.
*/
var video = $('', {
id: 'video',
class: 'myclass',
poster: 'https://path/to/my/poster.jpg'
}).prop({
muted: true,
autoplay: true,
loop: true,
});
var src1 = $('', {
type: 'video/webm', // for Firefox, Chrome; slightly smaller file size
src: 'https://path/to/my/video.webm'
}).appendTo(video);
var src2 = $('', {
type: 'video/mp4', // for Safari, Firefox, Chrome
src: 'https://path/to/my/video.mp4'
}).appendTo(video);
video.appendTo($('body'));
Note that:
muted, autoplay, loop must go inside of prop(). Setting them as attributes will not work! (And will be quite misleading, because you'd think you set them when in fact you really haven't.)
muted is needed in Chrome for autoplay to work.
A simple way to create the poster: open the video with VLC, take a Snapshot, converted the resulting PNG to JPG.
Make sure the video is properly converted. Not all MP4 files will work in the browser. This proved useful: Video conversion with FFmpeg (for the Web).
加载中...