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%"
Related
This is my code:
<div class="sameline">
<video width="800" height="315" controls>
<source src="../videosrecords/Half Brothers.mp4" type="video/mp4" />
</video>
</div>
For some reason, the controls end up looking really weird. Like this:
I'm creating a movie-sharing website so all containers should be in the same size. How can I set it up so that the movie perfectly fits the video area?
The website can be located at: https://jokerfilms.000webhostapp.com/video/HalfBrothers
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>
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'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);
}
Sorry if this has been asked before (I definitely tried searching). I have an HTML video embedded on a page, and the player controls are displaying outside the video window. I'd like to get them inside the video window, but I can't seem to find any customization available for the controls attribute.
I know the HTML <video> tag isn't very customizable, but I've seen many HTML videos display in the desired way (with controls inside the video window, not outside), so I assume it's possible.
Example of what I'm trying to do: http://easyhtml5video.com/
How it currently looks:
It appears that the height attribute is the problem.
Without the height attribute:
<video controls="" id="videoelement" width="480" style="margin:auto; padding-left:107px" webkit-playsinline="">
<source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" />
<source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" />
<source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" />
</video>
With height attribute:
<video controls="" id="videoelement" width="480" height="360" style="margin:auto; padding-left:107px" webkit-playsinline="">
<source src="http://easyhtml5video.com/images/happyfit2.mp4" type="video/mp4" />
<source src="http://easyhtml5video.com/images/happyfit2.webm" type="video/webm" />
<source src="http://easyhtml5video.com/images/happyfit2.ogv" type="video/ogg" />
</video>
The height attribute should be the actual height of the video.
height of your video tag should match the height of the actual video resolution....
here is the FIDDLE
In this the video resolution is 604px X 256px
If the video tag has 604x256 then the controls stay within, if I changed the height to 356 as demonstrated in the fiddle, then the controls are going outside the video.
You might want to check your video resolution and compare it with the height of your video tag.
Not sure if width matters though.