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.
Related
Now I have a video(mp4,webm) as background of a html-section. But it does not look good on mobile. I would like place the original html file into the html code, as background. (I have an animated html5 file whit js) Is it possible?
Thank you. enter link description here
<section class="pt-page pt-page-1 section-with-bg section-paddings-0" style="background-image: url(images/home_page_bg_1.jpg);" data-id="home">
<video autoplay loop muted playsinline id="video-background">
<source src="images/movie.mp4" type="video/mp4">
<source src="images/moviewebm.webm" type="video/webm">
</video>
</section>
You have to implement different sizes of the video player for different screen sizes using CSS that will fill the screen.
I tested the link and it works fine. Just scale it.
I want to hide the video play button which is shown in the screen , is there any way for that ? I am using html5 video player.
I am unable to add image of that here . Please check the link button , there is a image and video button is highlighted by red circle.
http://awesomescreenshot.com/02c4ocr318
Is there any way to complete this ?
Edit: code:
<div class="v" id="player">
<video id="myVideo" width="100%" height="100%" poster="1.png" controls >
<source src="nrgmom.mp4?title=0&byline=0&portrait=0" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
</video>
<!-- <iframe frameborder="0" allowfullscreen="" src="youtube.com/embed/nMehBNvN_PM"></iframe>-->;
</div>
Remove controls attribute from video element.See this documentation for further information related to video element.
mozilla video element documentation
I would recommend You to use basic html element instead of any jquery/js plugins as it does not show any play overlay by default and works just fine in all browsers with html5 support. U can also customize is via css/js.
Check out: http://www.w3schools.com/html/html5_video.asp
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);
}
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.