Problem with playing video on Chrome. Programs work fine on Firefox, Opera and Safari and once (I think) worked fine on Chrome. The past discussions do not help me. Here is a link:
http://faculty.purchase.edu/jeanine.meyer/html5/chooselocation.html
The html5 markup is similar for the 3 videos, but the 1st and 2nd do not work and the 3rd one does!
This script: http://faculty.purchase.edu/jeanine.meyer/html5/collagebase.html
contains code for checking that the videos are loaded but does not play them.
Please help me.
Change the source ordering for your different formats.
For example, you're currently rendering the following for one of your videos:
<video id="fire" loop="loop" preload="auto" controls="controls" style="display: block;">
<source src="sfire3.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
<source src="sfire3.theora.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="sfire3.webmvp8.webm" type="video/webm; codec='vp8, vorbis'">
Your browser does not accept the video tag.
</video>
Swap the placement of the first and last <source> elements:
<video id="fire" loop="loop" preload="auto" controls="controls" style="display: block;">
<source src="sfire3.webmvp8.webm" type="video/webm; codec='vp8, vorbis'">
<source src="sfire3.theora.ogv" type="video/ogg; codecs='theora, vorbis'">
<source src="sfire3.mp4" type="video/mp4; codecs='avc1.42E01E, mp4a.40.2'">
Your browser does not accept the video tag.
</video>
Related
I have the different video files in the HTML <video> tag like so :
<video autoplay="" id="video" preload="auto" style="display: inline-block;">
<source src="../register.mp4" type="video/mp4">
<source src="../register.webm" type="video/webm">
<source src="../register.ogv" type="video/ogg">
</video>
But for some reason, in chrome it doesn't work. It only works if I get rid of the MP4 source, but then it doesn't work in IE... not sure what's going on here or the best way to approach this.
I have already gotten passed the step of creating video files for all browsers as suggested in this question, but it has not solved my issue.
The order in which you list the sources matters. In Chrome, once the .MP4 video fails to load, the other sources don't even bother trying to load, so just by putting the .MP4 source as the last source element it fixed everything.
<video autoplay="" id="video" preload="auto" style="display: inline-block;">
<source src="../register.webm" type="video/webm">
<source src="../register.ogv" type="video/ogg">
<source src="../register.mp4" type="video/mp4">
</video>
I have a video tag looking like this:
<video width="380px" height="190px" controls>
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogv" type="video/ogg" />
Your browser does not support the video tag.
</video>
This plays the video in Firefox and Chrome. However, IE9 and 10 simply states unreadable source (the video 'box' itself turns up so the tag is supported). Safari doesnt seem to support the video tag and thus I only see my fallback message. However, if I go to the URL directly in any browser I can watch the movie in Firefox + Chrome and download it in IE + Safari.
What should I do to make the video playable in all browsers?
Add this line in your head somewhere.
<script src="http://api.html5media.info/1.1.5/html5media.min.js"></script>
Also try putting your source in the opening video tag.
<video source src="movie.mp4" type="video/mp4" width="380px" height="190px" controls></video>
Hope fully that helps
I usually have four versions of the same video for cross-browser compatibly:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.flv" width="320" height="240">
</object>
</video>
.mp4, .webm, .ogv, and a flash fallback .flv. This has worked well for me cross-browser. Another thing to note is that for mobile, a higher-optimised .mp4 video is more likely to work (I've had issues with this in the past).
I have a website I was working on for a uni project, and I embedded a video using the HTML5 video tag. The code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
And it was working fine at uni, but when I went home it no longer worked. I did a bit of research, and Chrome doesn't support mp4. Ok fine, so I found a site that allowed me to convert to the other supported types so now my code looks like this:
<video width="400" controls="">
<source src="images/Nexus.mp4" type="video/mp4">
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
Something broke :/
</video>
And both the ogg and webm were working (I tested each one individually using comments). But at home it still didn't work. It comes up with the video widget thing and displays the correct length of video but the play button is disabled and there is no still image. But it still worked at uni. Until today. Now I have the same problem. Have Chrome stopped supporting the HTML5 video tag?
NOTE the ogg and webm still work on firefox, but not mp4
try to rearrange it so that
<video width="400" controls>
<source src="images/Nexus.ogv" type="video/ogg">
<source src="images/Nexus.webm" type="video/webm">
<source src="images/Nexus.mp4" type="video/mp4">
Something broke :/
</video>
and remove the empty value for attribute controls
I am new to working with videos and what i'm trying to accomplish is putting a video on my site. I have been researching and havent found to much, any help would be very much appreciated. Here is what I have so far.
<embed "images/K36U21TR.wmv" width="300" height="300" />
My preffered method is to upload the video to YouTube and place it on your site using their embed code which is an iframe tag.
This provides the benefit of your users using YouTube's bandwidth when they are watching the video rather than yours.
Alternatively you could look at using the HTML5 VIDEO tag.
http://www.w3schools.com/tags/tag_video.asp
<video width="300" height="300" controls>
<source src="images/K36U21TR.wmv" type="video/wmv">
</video>
video tag : (Supprot : IE, Firefox, Chrome, Opera, Safari)
<video width="320" height="240" controls="controls">
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
</video>
embed tag : (Supprot : IE, Firefox, Chrome, Opera, Safari)
<embed src="helloworld.swf">
I have noticed a strange problem with the HTML5 <video/> tag in Chrome.
Using this, it works fine:
<video poster="023.png" autoplay controls>
<source src="todojunto.mp4" type="video/mp4" />
</video>
This only plays the sound, no video:
<video poster="023.png" autoplay >
<source src="todojunto.mp4" type="video/mp4" />
</video>
If I remove the poster attribute, it works again.
All other browsers (even IE9...!) works perfectly, and I can't seem to find the reason.
Any ideas/help?
Thanks
Video tag's attributes should be specified for strict standard implementation:
<video poster="023.png" autoplay="autoplay" controls="controls">
<source src="todojunto.mp4" type="video/mp4" />
</video>
If this doesn't work, there is something changed in your browser's preferences
I'm surprised your video even shows up. Chrome stopped supporting mp4. You should use a .webm file when working with Chrome for html5 videos.
You need to use muted=""; it does work for video
<div class="wrap">
<video width="auto" height="400px" autoplay="" loop="" muted="">
<source src="Video.mp4" type="video/mp4">
<source src="Video.ogg" type="video/ogg">
</video>
</div>
I've encountered the same error.
I fixed it by adding the preload="auto" tag.
<video autoplay loop preload="auto" poster="023.png">
<source src="todojunto.mp4" type="video/mp4" />
</video>
Don't know if this will work for you, and it's been some time since you asked the question. But maybe this will help someone in the future!
I just converted it to ogv and works well in all browsers. I had problem with firefox but no issues anymore. It was also showing a gray background but now, now anymore. here is my code: you can see it in eargo.com/products
<video class="" style="" autoplay loop>
<source class="" src="video.ogv" >
<source class="" src="video.mov" >
<source class="" src="video.mp4" >
</video>
you may see it after 5-7-2015.