Html5 Video Issue With Chrome June 28, 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> CopyThen detect if the Browser is chrome:var isChrome = !!window.chrome; var isIE = /*@cc_on!@*/false; CopyIf 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($('<videoid="videoId"width="100%"autoplayloop><sourcesrc="video.webm"type="video/webm"></video>')); } CopyAnd 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" />')); } CopySolution 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:<videowidth="320"height="240"controls><sourcesrc="video/Ruby.ogv"type="video/ogg" /><sourcesrc="video/Ruby.webm"type="video/webm" /><sourcesrc="video/Ruby-iPad.mp4"type="video/mp4" /><objectclassid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"width="320"height="240"id="Ruby"align="middle"><paramname="movie"value="video/Ruby.swf" /><paramname="quality"value="high" /><paramname="bgcolor"value="#ffffff" /><paramname="play"value="false" /><paramname="loop"value="false" /><paramname="menu"value="true" /><!--[if !IE]>--><objecttype="application/x-shockwave-flash"data="video/Ruby.swf"width="330"height="295"id="Ruby"><paramname="movie"value="video/Ruby.swf" /><paramname="quality"value="high" /><paramname="bgcolor"value="#cccccc" /><paramname="play"value="false" /><paramname="loop"value="false" /><paramname="menu"value="true" /><!--<![endif]--><imgsrc="video/Ruby.jpg"alt="No video playback capabilities" /><!--[if !IE]>--></object><!--<![endif]--></object></video><pclass="caption"><em>Ruby</em> (fragment), ICF Hastings 2013.</p>CopyThe 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/Solution 3: Make sure that yout have HTML5 doctype:<!DOCTYPE html>CopyThis 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> Copyand 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); CopyThis 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 Post a Comment for "Html5 Video Issue With Chrome"
Post a Comment for "Html5 Video Issue With Chrome"