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>
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>
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>
As seen in new Google Chrome updates, we can see the download button for embedded audio/video in HTML pages. I want to show the same in Firefox & edge browsers.
How can I achieve this?
you can't have the same exact thing unless you create it yourself and disable the download button for Chrome so it'd look consistent in all browsers.
.download{
height: 45px;
width: 45px;
position: relative;
top: -30px;
left:-55px;
}
<div class="container">
<video width="400" controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<a href="https://www.w3schools.com/html/mov_bbb.mp4" target="_blank" download><img class="download" src='https://cdn1.iconfinder.com/data/icons/hawcons/32/698392-icon-129-cloud-download-128.png'/></a>.
</div>
I have an iframe inside Div in which i want to add video . I have added the URL path for the video correctly but not getting video on the screen neither i am getting any error on the browser console.Here is the HTML for the whole..
<div style="position:relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe width="420" height="315" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<video id='video-player' autoplay preload='metadata' controls>
<source src="Video/Sapno.MP4" type="video/mp4">
</video>
</iframe>
</div>
Please help me in displaying the video to my website ..Thanks..
You don't need to use iframe here, If you remove the iframe it will work, If you need the iframe from any reason you need to put "src" attribute in the iframe with link to the video.
<div style="position:relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<video id='video-player' autoplay preload='metadata' controls>
<source src="Video/Sapno.MP4" type="video/mp4">
</video>
</div>
Make a separate HTML page (let's say second.html) containing the <video> element and now call that page within the iframe as follows: <iframe src="second.html" ... ></iframe>.
Hope it helps.
<video src="/video/demo.mp4" width="200" height="100" controls>
<p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
</video>
I want to place an image in front of html video. And here is my code so far:
<style>
video.videos {
background-image: url(image.png);
background-repeat: no-repeat;
z-index:1;
}
</style>
<video id="Video1" class="videos" >
<img src="image.png" align="absmiddle" style="z-index:2;" >
<source src="video1.mp4" type="video/mp4"></source>
Browser does not support HTML5. Video could not be loaded.
</video>
But using z-index does not make it working. I mean, the image still remains behind the video file. Is there a possibility to fix this? Maybe any other way?
Place it outside the video tags and use this style to position it:
top: 100px; left: 100px; z-index: 0; position: absolute;
Naturally, you'll need to adjust values for your specific application. If absolute positioning doesn't work for you, you can always use relative positioning, which can be more flexible. See JSFiddle for an example of positioning an image in front of a video.
What you mean with front of html video?
if it's the image poster, you can use this:
<video width="320" height="240" poster="/images/w3html5.gif" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>