I'm new to HTML so apologies if this is a dumb question.
In HTML, a video element looks like this:
<video src="https://example.com" controls>Label or text to display</video>
An audio element looks like this:
<audio>
<source src="iAmAnAudioFile.mp3" type="audio/mp3">
</audio>
And an image element looks like:
<img src="image.png">
Is there a rationale for all these to use such a different syntax from each other? Why don't they just all look the same, like:
<img src="https://example.com" attribute1 attribute 2>This could be alt text or be empty</img>
<audio src="https://example.com" attribute1 attribute2>This could be alt text or be empty</audio>
<video src="https://example.com" attribute1 attribute2>Label or text to display</video>
I understand that each element has different needs (like video needs to display text if the browser can't display the video), but it seems like those could be accommodated in a unified syntax.
<video> and <audio> are actually unified.
You can very well have
<video>
<source src="thesource.mp4">
</video>
as well as
<audio src="thesource.mp3" controls>Some fallback text</audio>
They both have a few attributes that will differ, but most are shared.
For still images, the equivalent element would be <picture> and not <img>, though it can't have its own src.
<img> is a very old element, from an other era, which explains why it's not designed the same way.
There's a good reason. You can have multiple <source> elements inside an <audio>, or indeed a <video> element, so the syntax is in fact consistent (<img> only allows one source however, so only src is supported). And if there is only one source, you can indeed use the src attribute for <audio> as well.
From https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source
It is commonly used to offer the same media content in multiple file formats in order to provide compatibility with a broad range of browsers given their differing support for image file formats and media file formats.
I assume you're talking about how the img tag doesn't have a closing tag?
Since the element cannot have any child nodes, it is defined as EMPTY and the end tag is forbidden (as it would serve no purpose).
The audio opening tag and end tag is on a new line I see in your example, but that doesn't matter, as long as it is closed. New line or on the same, it's the same.
Google Chrome is now shipping with a download button for videos that are just embedded videos (i.e. not MSE):
I'm having a hard time find any documentation for Chrome's implementation of the <video> tag. Does anyone know if there is a way - short of disabling "controls" and creating your own video player controls - of disabling this feature?
I realize that if this is showing, it's already easy to download the video, I just want to disable that functionality from appearing as part of the controls.
Thank you!
or you can simply add nodownload in controlsList
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
You can inspect the controls of the native Chrome Video Player by activating the shadow DOM in Settings|Preferences -> Elements -> Show user agent shadow DOM
After that you can inspect the players buttons.
Now the problem is that the download button cannot be accessed via CSS for some reason.
video::-internal-media-controls-download-button {
display:none;
}
won't work.
Even selecting the preceding button and targeting its neighbor using + or ~ won't work.
The only way we found yet was nudging the button out of the viewable area by giving the control panel a greater width and making the enclosure overflow: hidden
video::-webkit-media-controls {
overflow: hidden !important
}
video::-webkit-media-controls-enclosure {
width: calc(100% + 32px);
margin-left: auto;
}
I hope google will fix this issue soon because most content providers won't be happy with this...
Demmongonis solution does work but be aware it can lead to unwanted results.
Android/Chrome sometimes, depends in the video I guess and other factors, adds buttons at the right of the download-button. i.e. the casting-button (there is no way to select it). It will make the download-button to remain visible and the last button to get hidden (casting-button)
Update
It is posible now to hide the download button using the controlsList attribute:
<video controlsList="nodownload" ... />
Yes, this is possible now, at least at the time of writing, you can use the controlsList attribute:
<video controls controlsList="nodownload">
<source data-src="movie.mp4">
</video>
It seems this was introduced in Chrome 58, and the documentation for it is found here: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
Developers can now customize media controls such as the download, fullscreen and remoteplayback buttons.
Usage in HTML:
<video controls controlsList="nofullscreen nodownload noremote foobar"></video>
There is even an official sample page: https://googlechrome.github.io/samples/media/controlslist.html
One more control item I was trying to disable, additionally to 'download' - is 'picture-in-picture'.
Sadly there`s no property, for that purpose to be added in the controlsList. But there is an attribute - disablePictureInPicture you can add to the Element to disable pip.
Example disabling both download and picture-in-picture:
<video disablepictureinpicture controlslist="nodownload">...</video>
Details: https://wicg.github.io/picture-in-picture/#disable-pip
Hey I found a permanent solution that should work in every case!
For normal webdevelopment
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ undevinded? --> Debug modus!
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
Let me know if it helped you out!
To keep it simple.. You need to add an attribute called controlslist (LOWERCASE, directly after controls) and you need to set its value to ="nodownload". Also, make sure your src file(type) and your attribute type's value match, unlike some of the above examples; my link is to a file named 'sunrise over water.mp4' on my Google Drive. How I do it looks like this:
<video src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" title="sunrise over water" width="420" height="300" controls controlslist="nodownload" type="video/mp4">
Video Not Supported By Your Browser...
</video>
OR
<video width="440" height="320" title="sunrise over water" controls controlslist="nodownload">
<source src="https://drive.google.com/open?id=0B1CDu1eNPJqDVEQxMzZUV1dURjg" type="video/mp4">
Video Could Not Be Played In Your Browser... Sorry.
</video>
In addition to above answers you have to add following code to disable context menu:
index.html: (globally)
<body oncontextmenu="return false;">
OR you can disable context menu for some element:
element.oncontextmenu = function (e) {
e.preventDefault();
};
Plain javascript to disable the "download" Button from a video in your page:
<script>
window.onload = function() {
video = document.querySelector('video');
if (video) {
video.setAttribute("controlsList", "nodownload");
}
};
</script>
If you want to, you can also is querySelectorAll and remove each video. In my example I just have only one video per page.
The above answer offers a good solution. However, when I was working on this in my project, there were two problems with it.
Download occurs (as if the download button had been pressed) when right margin area of the fullscreen button is touched on Android (mobile or tablet). Applying z-index didn't fix it.
Because of overflow:hidden, the download button is invisible but still exists to the right of the fullscreen button. That means when you press "tab" several times after clicking any control button or bar on PC, you can still reach the download button.
Additionally, be careful -- some small-width devices (e.g. mobile phones) are small enough to hide the seek bar. It would need many more pixels to hide the download button.
I hope Google provides the option to adjust this ASAP.
I using following JavaScript snippet which is working very well:
document.querySelectorAll("video[id^=media-player]").forEach((elem) => elem.controlsList.add("nodownload"));
Example: www.ring-cafe-finsterwalde.de/archiv/archiv.html#archiv4
I've tried this:
<div class="music8">
<audio controls>
<source src="http://mcclures.tech/ect/song.mp3">
<source src="http://mcclures.tech/ect/shatterme.mp3">
</audio>
</div>
And CSS
.music8 {
position: fixed
bottom: 0
}
Doesn't seem to work. What am I doing wrong?
First you are missing some endings to your css statements after you state an elements attribute in css you end it with a semi-colon. Second it is best practice to specify a left or right along with your bottom position. So it would look something like the following:
Here is a fiddle to show you Fiddle Demo
.music8 {
position: fixed;
bottom: 0;
left:0;
}
I think you want to define multiple mp3 file for one audio player. you can not do it. you will have to define one src for at a time for audio elements and if you want to change it then fetch the file path from somewhere like array and change the src by jabascript or jquery.
do something like this-- and give one src at a time.
<audio controls>
<source src="http://mcclures.tech/ect/song.mp3" type="audio/mpeg">
</audio>
I'm trying create a site where there are multiple on video on one page, basically a new video will be on the bottom after one like the image shown below.
This is a two separate video, the problem is i cant find a way for all the video to have a standard size. both video has same width and height, here is the snippet:
src="file://D:/src1.mp4"
tabindex = "0" controls = "controls" loop ="true
width="320" height="240">
src="file://D:/src2.mp4"
tabindex = "0" controls = "controls" loop ="true
width="320" height="240">
What i see is the other video is not the same at all, what i just want it for both of them to have the same size both before and on playing.
Note: I not yet eligible to post an image
Add this, you can re-size it by changing height & weight-
<video src="file://D:/src1.mp4" tabindex = "0" controls = "controls" loop ="true" width="300" height="240"></video>
Few tag was missing from your code. Hope it works now!
I am unable to add div and video tags inside joomla 2.5.7 articles as when i am adding the div but content is not showing on live.
<div class="rightside">
<div>
<video width="900" height="550">
<source src="http://eb5mg.com/video/1.mp4" type="video/mp4">
</source>
<source src="http://eb5mg.com/video/eb5.ogg" type="video/ogg">
</source>
</video>
</div>
</div>
Try the below code
<div class="rightside">
<div>
<video width="900" height="550">
<source src="http://eb5mg.com/video/1.mp4" type="video/mp4">
<source src="http://eb5mg.com/video/eb5.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
I see this is an old topic but I went though this same problem. It has everything to do with Joomla and for me it came from two separate sources.
First there is a html word filter which is part of the global configuration which on defualt uses a black list to strip out many tags. I set the publisher and super users Filter Type to No Filtering but depending on your users and security needs you might want to be more strict (say like expand on the black list and only allow super user to have no filter).
Then is the wyswyg editor you are using for your articles. It also may be text filtering your html, TinyMCE which was my defaut editor also has options for stripping out code which you can adjust but after playing with it for a while I changed my users profile text editor to none.
After that my video tags worked and I imagine your div tags will work too.