Jquery Autoplay Video August 28, 2023 Post a Comment Hi I have some very basic html for a video: Solution 1: You can use:$("#video_player")[0].play(); CopyOr:$("#video_player")[0].autoplay = true; CopyOr:document.getElementById("video_player").setAttribute('autoplay', true); CopyWhatever suits you. Using $('#video_player').play(); you are referencing to non-existing method play in jQuery and you should reference to the object found by $("#video_player").To change the src of the video in JS, you just simply need something like that:functionplayFile() { var video = $("#video_player"); video[0].src = "http://www.yoursrc.com/video_new.mp4"; video[0].load(); video[0].play(); }; CopyNOTE: In Chrome, you should also need to add muted property if you want to use the autoplay attribute. Refer to : https://developers.google.com/web/updates/2017/09/autoplay-policy-changesSolution 2: 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 <template>) 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 = $('<video />', { id: 'video', class: 'myclass', poster: 'https://path/to/my/poster.jpg' }).prop({ muted: true, autoplay: true, loop: true, }); var src1 = $('<source />', { type: 'video/webm', // for Firefox, Chrome; slightly smaller file sizesrc: 'https://path/to/my/video.webm' }).appendTo(video); var src2 = $('<source />', { type: 'video/mp4', // for Safari, Firefox, Chromesrc: 'https://path/to/my/video.mp4' }).appendTo(video); video.appendTo($('body')); CopyNote 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).The hard-to-read-alternative mentioned above:$('body').append('<videoclass="c-congrats c-congrats--outofnew"autoplayloopmuted><sourcesrc="https://path/to/my/video.webm"type="video/webm" /><sourcesrc="https://path/to/my/video.mp4"type="video/mp4" /> Your browser does not support the video tag. </video>') CopyCSS.myclass { position: fixed; z-index: -1; height: 100vh; top: 0; left: 0; } CopySolution 3: Please check this simple step, This works well for me$('video').trigger('play'); CopyThanks Share Post a Comment for "Jquery Autoplay Video"
Post a Comment for "Jquery Autoplay Video"