JQuery Autoplay Video April 23, 2023 Post a Comment Hi I have some very basic html for a video: Solution 1: You can use: $("#video_player")[0].play(); Copy Or: $("#video_player")[0].autoplay = true; Copy Or: document.getElementById("video_player").setAttribute('autoplay', true); Copy Whatever 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: function playFile() { var video = $("#video_player"); video[0].src = "http://www.yoursrc.com/video_new.mp4"; video[0].load(); video[0].play(); }; Copy NOTE: 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-changes Solution 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.Baca JugaJquery + Svg Object: Capture Click Event ProperlyPhp + Jquery Change Value Of Textbox According To Two DropdownHow To Display The Value Get From .val() 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 size src: 'https://path/to/my/video.webm' }).appendTo(video); var src2 = $('<source />', { type: 'video/mp4', // for Safari, Firefox, Chrome src: 'https://path/to/my/video.mp4' }).appendTo(video); video.appendTo($('body')); Copy 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). The hard-to-read-alternative mentioned above: $('body').append('<video class="c-congrats c-congrats--outofnew" autoplay loop muted> <source src="https://path/to/my/video.webm" type="video/webm" /> <source src="https://path/to/my/video.mp4" type="video/mp4" /> Your browser does not support the video tag. </video>') Copy CSS .myclass { position: fixed; z-index: -1; height: 100vh; top: 0; left: 0; } Copy Solution 3: Please check this simple step, This works well for me $('video').trigger('play'); Copy Thanks Share You may like these postsSlick.js And Html5 Video Autoplay And Pause On VideoPlay Html5 Video And Pause At Specific Points In TimeAndroid Html5 Video In WebviewProblems Creating A Custom Volume Control For Html5 Video Post a Comment for "JQuery Autoplay Video"
Post a Comment for "JQuery Autoplay Video"