Straightforward HTML5 video tag with several video types, but only the poster displays in Mac/Safari. What am I missing?
<video poster="~/images/image.jpg" preload="none">
<source src="myvideo.mp4" type="video/mp4" />
<source src="myvideo.webm" type="video/webm" />
<source src="myvideo.ogv" type="video/ogg" />
</video>
UPDATE - I know the tag is missing autoplay, but this is stuck in after the fact using JQuery. "viewport" is my variable that knows pixel width of the browser window.
if (viewport >= 768 && $(".videoInline video")[0]) {
$(".videoInline video")[0].load();
$(".videoInline video")[0].autoplay = true;
$(".videoInline video")[0].loop = true;
$(".videoInline video").get(0).play();
}
UPDATE 2 - to clarify, this is NOT iOS, it is Mac/Safari as stated above. So, desktop only.
I think you are missing the autoplay attribute:
<video controls autoplay>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
Related
<video
controls
className={"w-full h-full object-contain"}
loop
autoPlay
muted
>
<source
src={videoUrl.embed_url}
type="video/mp4"
className={"relative z-[100000]"}
/>
</video>
If I put static(local) video src -> it works. But external video URL - doesn't.
What can cause this problem?
i would try creating a frame. and sorry im not sure of the cause of the problem
<iframe width="420" height="315" src="https://www.youtube.com"> </iframe>
Try this one:
<video
controls
className="w-full h-full object-contain"
loop
autoPlay=""
muted="muted"
playsinline=""
>
<source
src={videoUrl.embed_url}
type="video/mp4"
className={"relative z-[100000]"}
/>
</video>
<iframe src="learning.pdf">
<div>test<div>
<video controls>
<source src="somevideo" type="video/webm">
</video>
All the tags below the "iframe" or "object" tag just don't work. If i put them at the end of the tree, all the above tags work, or if i put them in the middle of several tags, all the tags below the iframe or object tags don't work, but the ones above them, work.
<div>test<div>
<video controls>
<source src="somevideo" type="video/webm">
</video>
<object data="learning.pdf">
<div>test<div>
<audio controls>
<source src="some song.mp3">
</audio>
Why?
Because you didn't close your iframe tag, so all your subsequent content is within it (and ignored*, because the actual content of the iframe is taken from "learning.pdf").
Don't self-close it, either; it has to be accompanied by a proper </iframe>:
<iframe src="learning.pdf"></iframe>
<div>test<div>
<video controls>
<source src="somevideo" type="video/webm">
</video>
When in doubt, validate your HTML.
* More accurately, it's treated as alternative content for browsers that don't support iframes.
Could you please explain me the difference between
<video src=""> </video>
and
<video>
<source src="">
</video>
?
By using <video> <source> </video>.
You can add multiple source elements.
Multiple source elements can link to different video files. The browser will use the first recognized format.
<video width="320" height="240" controls>
<source src=http://example.com/foo.webm type=video/webm>
<source src=http://example.com/foo.ogv type=video/ogg>
<source src=http://example.com/foo.mp4 type=video/mp4>
<source src=http://example.com/foo.3gp type=video/3gp>
Your browser does not support the video tag.
</video>
I'm using the following code to implement an HTML5 video on a page
<video autoplay>
<source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
</video>
This works great, embedded on my page in FF, Safari, and Chrome. What I'd like, since this video has no controls, and is mean to be embedded in the page with no borders (white BG in the video) is to have an image appear in place of the video.
I'd like to have an image as the fallback if the video can't be rendered with the element. I've seen the following post: html5 video fallback advice (no flash) which started the discussion. But not sure if those answers were what I needed.
My gut tells me that I can have JQuery detect the video capability, and if video is not supported, then write out some HTML that shows an image. But I was looking to see if there's something that could be simpler.
After a lot of searching, I found the solution that worked for me back to IE8. Have not tested in IE7.
How can I display an image if browser does not support HTML5's <video> tag
The above post, shows a method that seems to work for me. Here is the output based on my above code:
<video autoplay>
<source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
<source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
<img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
</video>
The IE7 browser does not supports Video Element. We have to write Fall back code for video tag. Here is my code :)
<video controls="controls" autoplay="autoplay"
poster="#" width="212" height="160">
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
<object type="application/x-shockwave-flash" data="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf"
width="212" height="160">
<param name="movie" value="http://releases.flowplayer.org/swf/flowplayer-3.2.1.swf" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="transparent" />
<param name="flashVars" value="config={'playlist':['http%3A%2F%2Fsandbox.thewikies.com%2Fvfe-generator%2Fimages%2Fbig-buck-bunny_poster.jpg',{'url':'http%3A%2F%2Fclips.vorwaerts-gmbh.de%2Fbig_buck_bunny.mp4','autoPlay':true}]}" />
<img alt="Big Buck Bunny" src="http://sandbox.thewikies.com/vfe-generator/images/big-buck-bunny_poster.jpg" width="640" height="360" title="No video playback capabilities, please download the video below" />
</object>
</video>
I am making an audio site for fun, but I find it that the loop property to the audio tag doesnt work in firefox. I also know that conditional statements only work for IE, is there another way to accomplish the same goal?
<![if firefox]>
<script src="script.js"></script>
<![endif]>
EDIT: This is my current HTML code.
<audio id="song_1" name="audio" autobuffer loop>
<source src="song.ogg" />
<source src="song.mp3" />
<source src="song.wav" />
<div class="white_text">Your browser does not support the audio file formats or does not support HTML5.</div>
</audio>
<audio id="song_2" name="audio" autobuffer loop>
<source src="song2.ogg" />
<source src="song2.mp3" />
<source src="song2.wav" />
</audio>
<audio id="song_3" name="audio" autobuffer loop>
<source src="song3.ogg" />
<source src="song3.mp3" />
<source src="song3.wav" />
</audio>
<audio id="song_4" name="audio" autobuffer loop>
<source src="song4.ogg" />
<source src="song4.mp3" />
<source src="song4.wav" />
</audio>
<script>
var music = document.getElementsByName('audio'), i;
for (i = 0; i < n; ++i)
music[i].addEventListener('ended', function(){this.currentTime = 0;}, false);
</script>
Problem with this is that when 'loop' is added to audio tag, firefox wont loop. When 'loop' is not there, safari (or at least safari mobile, cuz thats what i have) wont loop.
You shouldn't test if the browser is Firefox but if the browser supports a feature. Also, I recommend to read: http://forestmist.org/2010/04/html5-audio-loops/ HTML5 audio loops are bad right now.
Edit:
You can try this: https://stackoverflow.com/a/6452884/259517
You can just check in JS what browser the user is using.
<script type="text/javascript">
if(navigator.appName == "Netscape") {
// it's Firefox.. do sth..
}
</script>
These are called conditional comments.
Per Conditional Comments Firefox:
No, they are only supported by IE.
There are CSS hacks though. See: http://perishablepress.com/press/2009/06/28/css-hacks-for-different-versions-of-firefox/
EDIT: Removed note per comment below. See above.