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/
Related
Goal:
I am trying to implement a control with as little code clutter as possible that will allow the change of quality of a video.
Preferences:
The following is what I am given, and I would rather work around it. I am open to using pre-built plugins or a javascript/jquery hack, but would rather not go for a solution that involves reinventing (me or you) the wheel (require the building of a custom video control scheme), but would take it as a last result.
EDIT:
Sorry. Did not mean to have that correlation, as the urls did not reflect any sort of pattern. I oversimplified it, not assuming people would look at the urls for a pattern. But thank you for that start, as I can probably work with that. Sorry again. I will change the urls to not have any pattern.
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
Thank you in advance for anybody who can give some insight.
Sorry for asking. Turns out I was able to solve it pretty much all by myself. Hate those moments. Here is the solution I came up with, which just involves copying the <source> I need based on the label attribute, deleting it, and prepending it into the <video> element:
HTML
<div class='vidcontainer'>
<select class='qualitypick' autocomplete='off'>
<option selected>fullHD</option>
<option>720p</option>
<option>360p</option>
</select>
<video controls preload>
<source label="fullHD" src="http://v.com/lorem.mp4" type="video/mp4">
<source label="720p" src="http://v.com/ipsum.mp4" type="video/mp4" >
<source label="360p" src="http://v.com/dolor.mp4" type="video/mp4">
</video>
</div>
JQUERY
$(document).ready(function(){
$('.qualitypick').change(function(){
//Have several videos in file, so have to navigate directly
video = $(this).parent().find("video");
//Need access to DOM element for some functionality
videoDOM = video.get(0);
curtime = videoDOM.currentTime; //Get Current Time of Video
source = video.find("source[label=" + $(this).textContent + "]"); //Copy Source
source.remove(); //Remove the source from select
video.prepend(source); //Prepend source on top of options
video.load(); //Reload Video
videoDOM.currentTime = curtime; //Continue from video's stop
videoDOM.play(); //Resume video
})
})
Although this was not my intention, I hope my answer is of some use. Sorry again for asking before thinking it through.
You don't need many source tags. One is enough, however, you need to change the value of the source attribute, which is src.
var map={'fullHD':'1080p','720p':'720p','360p':'360p'};
function changeQ(quality){
$('source','video#player').attr('src','http://v.com/'+map[quality]);
$('span#pp').html(map[quality]);
console.log($('source','video#player').attr('src'))
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Quality
(<span id="pp"></span>)</button>
<ul class="dropdown-menu">
<li>FullHD</li>
<li>720p</li>
<li>360p</li>
</ul>
</div>
<video id="player" width="400" controls>
<source src="http://v.com/1080p" type="video/mp4">
</video>
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>
Wonder if you can help. I've been trying to add background mp4 to a WordPress site I am developing for a client. I've explained that its a bad idea due to data usage but he is insistent.
When I added the mp4, I quickly understood that by default this action isn't supported. However, there must be a work around. I have read the posts here and googled extensively.
so far, what I've come up with is using #media to resolve.
#media screen and (min-width: 600px) {
.header-video {
display: block !important;
}
}
However, this doesn't seem to work either. Other than creating a gif is there any other way?
Additional HTML Code: -- I am interested in the video loop tag with the MP4 in
<div id="main-content">
<article id="post-54" class="post-54 page type-page status-publish hentry">
<div class="entry-content">
<div id="et-boc" class="et-boc">
<div class="et_builder_inner_content et_pb_gutters3"><div class="et_pb_section et_pb_section_0 header-video et_pb_section_video et_pb_preload et_pb_with_background et_section_regular">
<span class="et_pb_section_video_bg">
<video loop="loop" autoplay playsinline muted >
<source type="video/mp4" src="http://fortuna-x.com/wp-content/uploads/2018/07/Deep-Network-Green-Blue.mp4" />
</video>
</span>
<div class="et_pb_row et_pb_row_0">
<div class="et_pb_column et_pb_column_1_3 et_pb_column_0 et_pb_css_mix_blend_mode_passthrough et_pb_column_empty">
</div> <!-- .et_pb_column --><div class="et_pb_column et_pb_column_2_3 et_pb_column_1 et_pb_css_mix_blend_mode_passthrough et-last-child et_pb_column_empty">
</div> <!-- .et_pb_column -->
</div> <!-- .et_pb_row --><div class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters150">
<div class="et_pb_column et_pb_column_1_3 et_pb_column_2 et_pb_css_mix_blend_mode_passthrough">
As of April, 2018. Chrome Autoplay policy has changed. In order to autoplay your videos on the site, you're media engagement score needs to be high. Examples from the docs.
Example 1: Every time a user visits VideoSubscriptionSite.com on their
laptop they watch a TV show or a movie. As their media engagement
score is high, autoplay is allowed.
Example 2: GlobalNewsSite.com has both text and video content. Most
users go to the site for text content and watch videos only
occasionally. Users' media engagement score is low, so autoplay
wouldn't be allowed if a user navigates directly from a social media
page or search.
Example 3: LocalNewsSite.com has both text and video content. Most
people enter the site through the homepage and then click on the news
articles. Autoplay on the news article pages would be allowed because
of user interaction with the domain. However, care should be taken to
make sure users aren't surprised by autoplaying content.
Example 4: MyMovieReviewBlog.com embeds an iframe with a movie trailer
to go along with their review. The user interacted with the domain to
get to the specific blog, so autoplay is allowed. However, the blog
needs to explicitly delegate that privilege to the iframe in order for
the content to autoplay.
To check weather you're media score is high enough you can check it like this.
var promise = document.querySelector('video').play();
if (promise !== undefined) {
promise.then(_ => {
// Autoplay started!
}).catch(error => {
// Autoplay was prevented.
// Show a "Play" button so that user can start playback.
});
}
So, if you get an error, you can show the play button. The user would then need to click on it to start the video.
Best way is u can use any wordpress plugin for adding video background for mobile...
like https://envato.com/blog/plugins-video-backgrounds/
I found a solution here:
https://wordpress.org/support/topic/video-settings-twenty-seventeen-theme/
After creating children them it’s enough to add these code lines to the file functions.php:
/*
* Change the minimum screen size to use the video header
*/
function twentyseventeenchild_video_size( $settings ) {
$settings[‘minWidth’] = 100;
$settings[‘minHeight’] = 100;
return $settings;
}
add_filter( ‘header_video_settings’, ‘twentyseventeenchild_video_size’ );
it works!
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);
}