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>
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>
I have some problems on HTML5 video when I make a page not app working on mobile. I want to put some words on video when video plays, but it seems the z-index not working on video. This problem have troubles me a long time, and I have searched on google, stackoverflow and css-tricks, not finding the right answer.
<div id="main_container">
<div id="danmu">小苹果小苹果小苹果</div>
<video id="video" controls="controls">
<source src="mov_bbb.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
#video{width:100%;position: relative;}
#danmu{position: absolute;width: 100%;left:0;top:0;color:red;z-index:10;}
#main_container { float: left; position: fixed; left:0; top:0;width:100%;}
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>
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>