Html5 Video Issue With Chrome March 09, 2023 Post a Comment I'd like to use a html5 video on my web page, here is the code: Solution 1: This is a solution I found That worked for my case, First, embed the video in your html: <video id="videoId" width="100%" autoplay loop> <source src="main.webm" type="video/webm"> <source src="main.mp4" type="video/mp4"> Your browser does not support the video tag. </video> Copy Then detect if the Browser is chrome: var isChrome = !!window.chrome; var isIE = /*@cc_on!@*/false; Copy If its chrome, replace the video with webm version. (For those who haven't faced the problem themselves: if you embed both mp4 and webm , chrome will not play any of them, so you have to embed "webm" only) if( isChrome ) { $("#videoId").replaceWith($('<video id="videoId" width="100%" autoplay loop><source src="video.webm" type="video/webm"></video>')); } Copy And as for IE: In my case I replaced the html5 video with an image: if( isIE ) { $("#videoId").replaceWith($('<img id="videoId" src="img/video.jpg" />')); } Copy Solution 2: I had the same problem and couldn't solve it with any of the proposed solutions, either above or in other threads (updating Google Chrome's version or disabling Chrome's hardware acceleration didn't work either.) In the end what has solved it for me has been converting the video file to a different mp4 format. It turned out that I had converted the original mp4 with an MP4 VIDEO encoder, when I should have done so with an H.264 Normal encoder. Here's the full code: <video width="320" height="240" controls> <source src="video/Ruby.ogv" type="video/ogg" /> <source src="video/Ruby.webm" type="video/webm" /> <source src="video/Ruby-iPad.mp4" type="video/mp4" /> <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="320" height="240" id="Ruby" align="middle"> <param name="movie" value="video/Ruby.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#ffffff" /> <param name="play" value="false" /> <param name="loop" value="false" /> <param name="menu" value="true" /> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="video/Ruby.swf" width="330" height="295" id="Ruby"> <param name="movie" value="video/Ruby.swf" /> <param name="quality" value="high" /> <param name="bgcolor" value="#cccccc" /> <param name="play" value="false" /> <param name="loop" value="false" /> <param name="menu" value="true" /> <!--<![endif]--> <img src="video/Ruby.jpg" alt="No video playback capabilities" /> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </video> <p class="caption"><em>Ruby</em> (fragment), ICF Hastings 2013.</p> Copy The code above is an adaptation of the "Video For Everybody" method. You'll find more info at http://css-tricks.com/snippets/html/video-for-everybody-html5-video-with-flash-fallback/ I use an old version of Wondershare Video Converter but you can do the same job from free online services such as http://video.online-convert.com/ Baca JugaRoboto Font In Chrome Is Not Shown ProperlyHow To Hide The Url Of The Browser's Left-bottom Corner When A Link Is HoveredWhy Html5 Video Does Not Work On Google Chrome? Solution 3: Make sure that yout have HTML5 doctype: <!DOCTYPE html> Copy This fixed the problem for me. Solution 4: Try swapping the two, put mp4 first and the webm code second, and see what happens. I have this, <div id="ModelVideo"> <video max-width="100%" controls autoplay muted> <source src="movie1.mp4" type="video/mp4"> <source src="movie1.webm" type="video/webm" controls> Your browser does not support the video tag. </video> </div> Copy and mine is working fine in chrome, my mp4 that is, but cant test in the other browsers, although my Dreamweaver tests in Safari as well, and both seem to work fine. (don't laugh, still working on the website) Perhaps you can let me know how I can successfully control the volume, seem to have trouble with that one. Solution 5: Problem with Chrome is that once it downloads the video it does not play it. YOu can solve it by adding a small javascript snippet : this.interval = setInterval(function(){ this.countForVideo = document.getElementById('vid').readyState; if(this.countForVideo == 4){ document.getElementById('vid').play(); clearInterval(this.interval); } },2000); Copy This will check if the video is downloaded every 2 sec. If the video is downloaded, it will play the video and stop the interval. Share You may like these postsPrint Repeating Page Headers In ChromeIs It Possible To Show Webpage In A Window From My Chrome Extension, Only Using Js, Html And Css?Why Does Safari Treats Transform Translate Different When Compared To Chrome?Nested Flexboxes Works Differently Across Browsers Post a Comment for "Html5 Video Issue With Chrome"
Post a Comment for "Html5 Video Issue With Chrome"