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>
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.
I am trying to make a website where I have multiple videos on it. When I run the code, only the first video loads. No matter what I do, the second video will not play or load. Why doesn't my second video load?
Here's my code:
<html>
<head>
<title>Andrew soundboard!</title>
<style>
h1{
text-align:center;
}
</style>
</head>
<body>
<h1>Andrew Soundboard!</h1>
<br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3558.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3558.mp4">
</object>
</video>
<br>
FREAK OUT #1
<br><br>
<video width="320" height="240" controls="controls" autobuffer>
<source src="IMG_3559.mp4" type="video/mp4">
<object data="" width="320" height="240">
<embed width="320" height="240" src="IMG_3559.mp4">
</object>
</video>
<br>
STOP IT!
</body>
</html>
There doesn't appear to be anything wrong with your code. So the possible issues are:
Is your video on your server (or if running on computer, in an accessible folder)?
Are you linking to your video correctly (in the right file, etc.)?
Does your video have the exact same file name as your HTML?
Does your video have the EXACT same file extension as your HTML? (.mp4, .mov, etc.)
Hope this helped!
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>
We are using following code to display video in a site.
<a width="300" height="300" href="http://www.youtube.com/embed/FEqXWwPFusI">
Video is displaying by covering entire monitor size.
If i click on menu_video.jpg image, it's displaying video with full size.
But I want to display the video for specific space. [width ="300" height="300" ]
Suggest me to find solution.
Try This
<iframe src="http://www.youtube.com/embed/FEqXWwPFusI" width="300" height="300"></iframe>
You should use video tag . try this:
<video width="400" height="400" controls>
<source src="video file" type="video/mp4">
<source src="video file" type="video/ogg">
</video>
Try this code istead
<video width="300" height="300" controls>
<source src="http://www.youtube.com/embed/FEqXWwPFusI" type="video/mp4">
Your browser does not support HTML5 video.
</video>
Source link
or try iframe
<iframe type="text/html"
width="300"
height="300"
src="http://www.youtube.com/embed/FEqXWwPFusI"
frameborder="0">
</iframe>
or refer this question for more