This is my code, I am trying to make so when I hover over the image it plays a video, and when you hover off it stops the video and goes back to the original image. The issue is when I hover off I am not able to rehover again to play the video again. I was wondering how I can do this so that I can hover over the image more than once to play the video. My coding is below:
<div class="thumb">
<video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()" onmouseout="this.src='assets/img/product/mac-flower.png';">
<source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
</video>
</div>
You can try to reload video onmouseout event, so that video shows poster again and replays onmouseover.
New Code:
<div class="thumb">
<video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()"onmouseout="this.load()">
<source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
</video>
</div>
Please load poster onmouseout like this:
<div class="thumb">
<video width="450" height="450" poster="assets/img/product/mac-flower.png" loop="true" preload="auto" onmouseover="this.play()" onmouseout="this.load()">
<source src="assets/img/vid/mac-flower.MP4" type="video/mp4">
</video>
</div>
Related
Hello everyone I have a problem with this code:
<div class="small-mobile-container">
<div class="mobv">
<video style="position:sticky "; preload="true", playsinline , autoplay="autoplay" muted loop>
<source src="Pictures/Video 1.mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
The problem is that it is not playing in the Safari web browser.
I tried a bunch of solutions but nothing helped. I don't know even why but there's a button which I can press, and then the video starts.
(1) Try using a full path to video. (2) Also rename your MP4 file name to not have spaces.
Code should be something like this:
<div class="small-mobile-container">
<div class="mobv">
<video preload="true" playsinline="" autoplay="" muted="" loop="" style="position:sticky; width: 100%; height: auto;" >
<source src="https://mywebsite.com/Pictures/Video_1.mp4" />
Your browser does not support the video tag.
</video>
</div>
</div>
I'm using the following snippet to embed a local video in a presentation made with xaringan in rmarkdown:
<video>
<source src="video_name.mp4" type="video/mp4">
</video>
The video works fine, but it runs off the bottom of the slide (i.e., it's too tall), and I cannot get any resizing to stick. I've tried using percentages
<video>
<source src="video_name.mp4" type="video/mp4" height="50%">
</video>
And absolute size
<video>
<source src="video_name.mp4" type="video/mp4" height="100">
</video>
And the video height does not change. What am I doing wrong?
The height argument controls the size of the container, so in this case, that would go into the video tag:
<video width='50%'>
<source src="video_name.mp4" type="video/mp4" >
</video>
For some reason my videos work good on PC and exactly how i want, but, on mobile, never mind if it's android or IOS, videos don't show. Just a blank space in box where video should be.
<div class="embed-responsive embed-responsive-1by1">
<video playsinline autoplay loop muted class="embed-responsive-item">
<source src="static/video/legs/video1.mp4" type="video/mp4">
</video>
</div>
<video width="800" height="800" style="margin-top: 150px; box-shadow: 0px 4px 4px 3px #635a5a;border-radius: 8px;" controls="">
<source src="assets/images/video.mp4" type="video/mp4">
</video>
This is responsive and works over all the devices
I have 3 videos for 3 different screen resolutions. I want to load the specific video for the shown resolution on page load and avoid loading the rest. Only 1 of 3 should be loaded.
For ios (using safari), autoplay needs to be present on page load for the videos to be shown without the controls. Even if I remove the autoplay attribute on page load, the entire video is being loaded.
On desktop, if I add autoplay after page load, the videos aren't being fully loaded.
How can I get only the videos which are visible to be fully loaded on page load?
Here's a simple example of the code:
<div>
<video muted="" class="col-md-12 d-none d-lg-block" poster="">
<source type="video/mp4" src="/video_Large.mp4">
</video>
<video muted="" class="d-none d-md-block d-lg-none" poster="">
<source type="video/mp4" src="/video_Medium.mp4">
</video>
<video autoplay muted="" class="d-block d-md-none" poster="">
<source type="video/mp4" src="/uploads/video_Small.mp4">
</video>
</div>
First, you need to add id tags like this in your HTML:
<video id="large" muted="" class="col-md-12 d-none d-lg-block" poster="">
<source type="video/mp4" src="/video_Large.mp4">
</video>
<video id="medium" muted="" class="d-none d-md-block d-lg-none" poster="">
<source type="video/mp4" src="/video_Medium.mp4">
</video>
<video id="small" autoplay muted="" class="d-block d-md-none" poster="">
<source type="video/mp4" src="/uploads/video_Small.mp4">
</video>
Then you need to make your css responsive and hide the other two videos for each screen size. For example,
#media only screen and (min-width: 600px) {
#small, #medium{
display: none;
}
}
If you want to avoid the entirety of the video being preloaded when the page loads, you can add preload="none" or preload="metadata" attribute to the video tags. This means that the video will play only when the user clicks on it.
How should I remove black border around tag in Internet Explorer? I've tried changing background-color, adding border:none but none of these worked.
<video id="hsense-video" class="hidden-sm hidden-xs" autoplay loop muted poster="video/hsense-poster.jpg">
<source type="video/mp4" src="video/hsense-video.mp4" />
</video>
have you tried !important?
video {
border-style: none !important;
}
<video id="hsense-video" class="hidden-sm hidden-xs" autoplay loop muted poster="video/hsense-poster.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
I just checked it in Codepen IE browser and there is not border. Also made an html page with the video and checked in IE 11 -> NO BORDER!
https://codepen.io/DannaB67/pen/GErxgx
<video id="hsense-video" class="hidden-sm hidden-xs" autoplay loop muted poster="video/hsense-poster.jpg">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>