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!
Related
I have this code inside
and I have the .css the class myvideo (It doesn't need this code ),it is the design.
What I want to know is ,how can I do pause and unpause this video.I try to stop my video and I didn't manage it.If you could help me with it I will be greatful.Thanks
<div class="myvideo" style="left: 6px; top: 0px">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="exr.mp4" type="video/mp4">
</video>
If you want to have control over a video element you must use JavaScript to control it. Here's a great example of how to control a video object from JavaScript: https://www.w3schools.com/tags/av_met_pause.asp
You may need to add another HTML element to control your video. This element must listen to a click event. After that, you will be able to do what you want with the video.
const videoEl = document.getElementById("video-bg-elem");
// Will play the video
videoEl.play();
// Will pause the video
videoEl.pause();
I need a thumbnail in my videogular2.
I want to create a thumbnail/poster for my video. Currently it only shows a play/pause button with black screen and vg-poster is not working.
Here is my code:
<vg-player>
<vg-overlay-play></vg-overlay-play><vg-controls vg-autohide="false">
<vg-play-pause></vg-play-pause>
<vg-mute></vg-mute>
</vg-controls><vg-poster vg-url="https://www.almanac.com/sites/default/files/styles/primary_image_in_article/public/image_nodes/sunflower-1627193_1920.jpg?itok=RUilemL3"></vg-poster>
<video height="200px" width="100%" [vgMedia]="media" #media src="{{server_path}}{{imgVid.data_path}}" id="singleVideo"
autoplay></video>
</vg-player>
The HTML 5 video tag has a poster attribute. From w3Schools:
specifies an image to be shown while the video is downloading, or until the user hits the play button. If this is not included, the first frame of the video will be used instead.
In your example it would look like this:
<video
poster="https://www.almanac.com/sites/default/files/styles/primary_image_in_article/public/image_nodes/sunflower-1627193_1920.jpg"
height="200px"
width="100%"
[vgMedia]="media"
#media
src="{{server_path}}{{imgVid.data_path}}"
id="singleVideo"
autoplay>
</video>
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'm trying to get a html 5 video to play on mouseover. It works fine in firefox and safari just in chrome the video blanks out when i hover and becomes visible only after i hover on another element on the page....
This is the site: www.manart.de
This is the code:
<div id="wrapper">
<video id="video-example" width="880" height="495" poster="fileadmin/cover.png" loop>
<source src="fileadmin/schiffchen.ogg.ogv" type="video/ogg"></source>
<source src="fileadmin/schiffchen.mp4" type="video/mp4"></source>
</video>
</div><!--end wrapper-->
<script src="fileadmin/js.js"></script>
And this is the js:
document.addEventListener('mouseover',hoverVideo,false);
var vid = document.getElementById('video-example');
function hoverVideo(e)
{
if(e.target == vid)
{
vid.play();
this.addEventListener('mouseout',hideVideo,false);
}
}
Thanks for helping!!!!
It's a bit odd that, but if you remove the poster frame (I also made sure that the hideVideo method was defined to avoid an exception being thrown) it works (fiddle).
I tried using a JPG instead of a PNG for the poster frame with the same results (fiddle). And when you substitute your video for one with sound, it's apparent that the video is playing, but that it's invisible (fiddle).
Looks like a bug in Chrome to me but Google didn't throw much up when I searched (maybe my terms were wrong).
The quick fix, therefore, is probably to simply remove the poster frame which, since Chrome will display the first frame of the video when it has loaded, is probably pretty close to what you're looking for anyway.
Update:
Alternatively, you could use the hack detailed in this thread on a similar issue which involves dynamically adding controls to the player before playback starts and removing them again immediately (fiddle). The author has confirmed the issue as a bug in Chrome by verifying that it does not occur in Chrome 19.
HTML:
<div id="wrapper">
<video id="video-example" poster="http://www.manart.de/fileadmin/cover.png" width="880" height="495" loop>
<source id='mp4'
src="http://www.manart.de/fileadmin/schiffchen.mp4"
type='video/mp4'>
<source id='ogv'
src="http://www.manart.de/fileadmin/schiffchen.ogg.ogv"
type='video/ogg'>
</video>
</div>
JavaScript:
var vid = document.getElementById('video-example');
// add the listener directly to the video element
vid.addEventListener('mouseover',hoverVideo,false);
function hoverVideo(e) {
if (vid.getAttribute('controls') != 'true') {
vid.setAttribute('controls', 'true');
}
vid.play();
vid.removeAttribute('controls');
vid.addEventListener('mouseout',hideVideo,false);
}
function hideVideo(e) {
// do whatever you were going to do here, but omitting
// the method completely causes an exception
//vid.pause();
// clean up the listener when finished
vid.removeEventListener('mouseout', hideVideo);
}
I was wondering if it's possible to set the width of the audio tag. It is not a supported feature by default, so "hacks" will be happily accepted.
I already tried putting them in small div's and tables, but that doesn't look very smooth... As far as I can see, I'm the only one bothering about it, but I really appreciate some help
There is no need for cross-platform/browser support; I'm happy as long as FireFox (3.6 ++) supports it.
Quick example as to what I'll be using:
<audio preload="auto" id="id12" controls="controls" onended="func12();" src="http://192.168.1.68/mymusic.wav"></audio>
Set it the same way you'd set the width of any other HTML element, with CSS:
audio { width: 200px; }
Note that audio is an inline element by default in Firefox, so you might also want to set it to display: block. Here's an example.
For those looking for an inline example, here is one:
<audio controls style="width: 200px;">
<source src="http://somewhere.mp3" type="audio/mpeg">
</audio>
It doesn't seem to respect a "height" setting, at least not awesomely. But you can always "customize" the controls but creating your own controls (instead of using the built-in ones) or using somebody's widget that similarly creates its own :)
You also can set the width of a audio tag by JavaScript:
audio = document.getElementById('audio-id');
audio.style.width = '200px';
You can use html and be a boss with simple things :
<embed src="music.mp3" width="3000" height="200" controls>