I'm trying to insert a video into my html page and currently I only see a static image, not the video I would like. Am i doing something wrong here?
<div class="video" style="oveflow:hidden; width: 100%; height:425px;">
<video src="../static/data/israel/jerusalem.mp4" loop="true"
muted="true" playsinline="true"></video>
</div>
Have you tried to adding the attribute autoplay?
You should probably have <source src="../static/data/israel/jerusalem.mp4" type="video/mp4"> inside of your <video></video> tags.
I'm referring to this w3schools example here:
Inserting videos in HTML
Edit: Wait, my answer went from being down voted and unhelpful to being the best answer? How did this happen?
Inserting video in HTML is like the following:
<video width="320" height="240" controls>
<source src="../static/data/israel/jerusalem.mp4" type="video/mp4">
</video>
Related
I currently have this:
<video controls="" autoplay="" name="media"><source src="...." type="video/mp4"></video>
It turns out, that half of the video is cut out of the screen, and I can't fix it.
Also, if you could help with this too, I'd like to know how to play the video in javascript.
Thanks!
Here is what I tried vs what I am expecting:
You need to add attributes responsible for width and height.
As an example:
<video id="Test_Video" width="400" height="240" controls>
<source src="gfg.mp4" type="video/mp4">
</video>
the size is in pixels. If you want you can also specify it in % f.ex width="100%"
<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.
Like the title suggests, I've got a HTML5 video that is currently sitting behind a wrapping div, like so:
<div class="video-wrap">
<video poster="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.jpg" style="width:100%" title="What is Customer Devotion?" id="html5_video_qlpjkwou10fcg14i">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.m4v" type="video/mp4">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.webm" type="video/webm">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.ogv" type="video/ogg">
<source src="/Media/video/index.files/html5video/Circles_Sequence_MORE_TEXT_v05.mp4" type="video/ogg">
</video>
</div>
The issue is that when the video plays, because of the constrictive div, there's no way to get any of the native right click controls up. I.e. I can't pause, play, loop, etc.
Is there a way around this without removing the div?
Thanks.
controls ="" attribute need to be added in video tag.
Example
<video width="400" controls>
demo
A nice workaround could be to popup the video. That way the user could interact directly with the video instead of the div.
I want my html email videos to be responsive. So what will be the procedure for that? Please let me know.
In your HTML file , make div and paste below code there...
<object class="responsiv-video">
<video autoplay >
<source src="file_name.mp4" />
<source src="file_name.3gp" />
</video>
</object>
it is to my understanding that you want to embed a video on your site that:
Is responsive
Allows both autoplay and loop
Uses Bootstrap
This Demo Here should do just that. You have to place another embed class outside of the object/embed/iframe tag as per the the instructions here - but you're also able to use a video tag instead of the object tag even though it's not specified.
<div align="center" class="embed-responsive embed-responsive-16by9">
<video autoplay loop class="embed-responsive-item">
<source src=http://techslides.com/demos/sample-videos/small.mp4 type=video/mp4>
</video>
</div>
Responsive mp4-video
I'm attempting to implement a background video simiilar to this. Stretching the full screen but maintain a height of 400px. How may I achieve this without JavaScript? Heres the HTML I have so far
<div class="project__three">
<div class="grid">
<video src="./videos/test.mp4" id="bg-video" muted autoplay loop ></video>
</div>
</div>
I wrote a blog post about this a while back. I don't think you're using the video tag correctly. I think it should look more like this:
<video muted autoplay loop>
<source src="http://yourwebsite.com/your-video-file.mp4" type="video/mp4"/>
<source src="http://yourwebsite.com/your-video-file.ogg" type="video/ogg"/>
<source src="http://yourwebsite.com/your-video-file.webm" type="video/webm"/>
Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
I'm pretty sure you have to include the "ogg" and "webm" extensions for HTML5 video to fully work.
Here is a link to my post where go into full detail.
This works with the above, doesn't look great though.Put it in your css
video{
webkit - transform:scaleX(2);
moz - transform:scaleX(2);
transform:scaleX(2);
}