I am a complete novice to coding so please excuse my ignorance. I am embedding a video using the tag which everything works as it should. I was wondering if there is a way to have the controls be hidden when the page loads and have them show up when the mouse is hovered over the video; like it does once it is playing. Any way to do this?
Btw: this is being entered into an html content box in a document editor (BEE)
THANK YOU
EDIT: attached are pictures of what it looks like where I can put the code. Again, I have minimal experience with this stuff. It is an html content box in a document editor.
What html box selection looks like
Once html box is added to editor
Taken from: HTML5 video - show/hide controls programmatically
<video id="myvideo">
<source src="path/to/movie.mp4" />
</video>
<p onclick="toggleControls();">Toggle</p>
<script>
var video = document.getElementById("myvideo");
function toggleControls() {
if (video.hasAttribute("controls")) {
video.removeAttribute("controls")
} else {
video.setAttribute("controls","controls")
}
}
</script>
Related
I'm writing a script that will pop-up a video and autoplay it following this example. Everything is working fine, however when the user closes the video, it continues playing in the background. How can I tell the browser to turn off autoplay after the user closes the video?
$(document).ready(function() {
$('#headerVideoLink').magnificPopup({
type: 'inline'
});
});
#headerPopup {
width: 75%;
margin: 0 auto;
position: relative;
top: 80px;
}
#headerPopup iframe {
width: 100%;
margin: 0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="headerPopup" class="mfp-hide">
<iframe width="854" height="480" src="https://www.youtube.com/embed/qN3OueBm9F4?autoplay=1" frameborder="0" allow="autoplay" allowfullscreen></iframe>
</div>
From my point of view, there is no straight forward answer to your problem. This is a common thing people encounter when trying to show videos on websites.
The best approach to do this, is by using the Bootstrap CSS framework, because it has modals (pop ups) where you can add a video and whenever you close or open them it exposes events that can trigger functionalities.
In this case, you need jQuery to do something when opening and closing the modal. To avoid the video from playing on the background when the user closes the modal, one way would be to remove the content of the src attribute of the iframe, that will prevent the iframe to continue playing the video. And then when the user opens the modal add the link back. If you don't do this, what will happen is that the user may click on the video one time, it will work fine, but then after jQuery removed the link of the video, it wont work.
jQuery script I use for this purpose:
$(document).ready(function(){
// Save the url of the video in a variable
var url = $("#MyVideo").attr('src');
// When the modal is closed remove the url of the iframe
$("#myModal").on('hide.bs.modal', function(){
$("#MyVideo").attr('src', '');
});
// When the modal is opened, add the url to the iframe
$("#myModal").on('show.bs.modal', function(){
$("#MyVideo").attr('src', url);
});
});
You can read more about how Bootstrap modals work here. The details and explanations of the events are on the bottom of the page.
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 will try and be as thorough with my question as possible the first go round. My question is this:
I am trying to embed a Vimeo video on to Blogger that plays at a specific timestamp, i.e. 4mins 32secs, instead of the beginning of the video without it autoplaying. The video will embed fine at the timestamp but it will autoplay and I cannot figure out how to turn that feature off. The code for the video is below:
<div style="text-align: center;">
<br />
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s" webkitallowfullscreen=""width="500"></iframe>
I have tried various methods "?autoplay=0" etc. but I guess I am not getting the code right.
Any help would be greatly appreciated
have you tried like this ?
<iframe allowfullscreen="" frameborder="0" height="375" mozallowfullscreen=""src="https://player.vimeo.com/video/125840111#t=3665s?autoplay=0" webkitallowfullscreen=""width="500"></iframe>
if it didn't work then try to find it by inspect element, it may be changed to ?autopplay=1 after page load,
so try this method it worked for me
first your html, paste a screenshot of your vimeo video in an image tag and define an onclick function for that and bind iframe on click function,it should work
here is the code
<div id="parent-div" >
<img id="vimeo-video" src="images/homeVideo.png" onclick="return imgClick();" />
</div>
and your javascript function
function imgClick() {
jQuery('#image-for-video').hide(); //hide the image to display your video
var ifrm = document.createElement("iframe");
ifrm.setAttribute("src", "https://player.vimeo.com/video/1992892829?autoplay=0");
ifrm.style.width = "496px";
ifrm.style.height = "277px";
// add rest of your values
ifrm.frameborder = 0;
document.getElementById("parent-div").appendChild(ifrm);
return false;
}
I'm doing a simple project for a digital arts class. I want to do a simple little choose your own adventure game, where you watch a clip, then choose from up to several different options on what to do next. Your decision will trigger a video, and the adventure will go on for a little awhile and the player will either escape the haunted house or be killed. This is my first time working with HTML5.
I need to do the following things:
1) When a button is pressed, a certain video is played.
2) After that video ends, the block of text at the top of the screen changes accordingly, presenting players with additional information and explaining their options in greater detail than the clips themselves can provide.
Right now, I just need help with step 1. I can't seem to figure out how to get the button onclick command to work correctly. The program displays the first Intro video just fine, but does not react at all when you click on any of the buttons. I was initially hoping to use something along the lines of an if else button.pressed command, but I can't find anything like that in HTML5. I know its not possible to troubleshoot my code since no one has access to my local files, but I'd appreciate any advice. Thanks!
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Spooks: Choose Your Own Adventure</title>
<script>
function $(id)
{
return document.getElementById(id);
}
//Video Source Changers
function Door()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4" type="video/mp4">
}
function Wander()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}
function Match()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Sesame.mp4" type="video/mp4">
}
</script>
</head>
<body style= "background-color: black">
<p style= "color:white">What an awful time to get stranded out in the countryside! It's raining cats and dogs out here. Hungry, freezing, exhausted and desperate, you head to the nearest visible shelter - a decrepit old mansion. Surely southern hospitality will see you safely through the night.</p>
<p>
<video width="400" controls>
<source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">
</video>
</p>
<p>
<button onclick="Door()">This is creepy. I'll just go back through the front door.</button>
<button onclick="Wander()">Really weird, but I guess it beats the storm. The owner probably just ran off to get the lights working. I'll wander around a bit, see if I can find him.</button>
<button onclick="Match()">It'd be nice to be able to see before I make a decision one way or the other. Let's light a match...</button>
</p>
</body>
</html>
Looks like there are a couple of issues.
1) your $('movie').src is invalid javascript, you have some junk code (type="video/mp4">) at the end of the line and the line should end with a semicolon. e.g.
function Door()
{
$('movie').src = "file:///C:/Users/Spencer/Videos/Spooks/Trapped.mp4";
}
2) Your video tag doesn't have an id attribute so you are not actually referencing anything in your javascript call to update the src:
<video width="400" controls id="movie">
<source src = "file:///C:/Users/Spencer/Videos/Spooks/Intro.mp4" type="video/mp4">
</video>
I put an updated JSfiddle here: http://jsfiddle.net/tv7pahcf/
i've a code which let start a youtubevideo after clicking on a image.
The Problem is, that Opera, Chrome ect. start the video behind the image before clicking.
Firefox works fine.
Heres my code:
<div onclick="thevid=document.getElementById('thevideo'); thevid.style.display='block'; this.style.display='none'">
<img style="cursor: pointer; margin-left: 89px;" src="./img/style/new/slider/XXXXXX.png" alt="" />
</div>
<div id="thevideo" style="display: none;">
<iframe width="604" height="266" src="//www.youtube.com/embed/XXXXXXXX?rel=0&autohide=2&showinfo=0&controls=0&modestbranding=0&wmode=transparent&showsearch=0&version=3&autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
Can you help me for a better code?
Additional is it possible to show the Image again after the video ends?
Thanks in advance
EDIT: push
What if you paste the iframe code to #thevideo when the user clicks the image?
I think you can use the .append() function in jQuery to do it.
The chrome/opera...browser issue is a known issue. There are browser settings that you can change that will make it so that it does not auto play the video, since you are really just putting a mask over the video. See this article: Stop youtube autoplay
EDIT:
To handle it with a programmatic approach:
change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
See above:
EDIT: To handle it with a programmatic approach: change your autoplay value in the youtube url to "autoplay=0". Add an id value to your iframe, such as id="iframe". Then add the following line of code to the click function of your image: document.getElementById('iframe').src = document.getElementById('iframe').src.replace('autoplay=0','autoplay=1');
This can also be seen at: Youtube Overlay Image Div - Autoplay Underneath
I used it and it works great!