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
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 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.
the following does not work with Safari 10.1
The HTML is
<div class=" ">
<video controls preload style="display: block; width: 90%; height: auto; margin: auto;" poster="/media/preview.png">
<source src="media/source1.mp4" type="video/mp4">
<source src="media/source2.mp4" type="video/mp4">
<source src="media/source3.webm" type="video/webm">
Your browser does not support the <code>video</code> element.
</video>
The video won't play in Safari 10.1, in Firefox and Chrome, it does.
Moreover, in the Element information in Safari, the source tag seems to be not recognized. It simply doesn't appear. However, I could download the video (it downloaded the first mp4 version). The downloaded file could be opened and played by Safari.
Any help?
Thanks!
I have tried this and this seems to work with Safari Version 10.1.1 (12603.2.4)
Please check if any class is not overriding height of player or any plugin is preventing video playback.
<div class="">
<video controls preload style="display: block; width: 90%; height: auto; margin: auto;">
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4">
<source src="http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4" type="video/mp4"> Your browser does not support the <code>video</code> element.
</video>
</div>
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>
I'm making a simple web page, and I wanted the first window to have a full screen playing video. I tried to embed it like this:
<div class="section active">
<video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0">
<source src="videos/Space.mp4" type="video/mp4">
<source src="videos/Space.webm" type="video/webm">
Video not supported
</video>
and
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 69;
overflow: hidden;
}
The first frame shows up, but it doesn't start playing. The files are in their proper location. Why could this be? I'm using fullPage.js if it makes any difference.
Please check this link:
https://github.com/alvarotrigo/fullPage.js/issues/267
You will have to make use of the callbacks afterRender or afterLoad for it.
$.fn.fullpage({
afterRender: function(){
$('#video')[0].play();
}
});
Now you can find also an available example to download in the examples folder of the plugin.
Try this
<div class="section active">
<video id="video_background" autoplay loop muted preload="auto">
<source src="videos/Space.mp4" type="video/mp4">
<source src="videos/Space.webm" type="video/webm">
Video not supported
</video>