I need a button that will resize a video on the webpage. The button must on first click make the video bigger, and on second click make the video smaller. I understand I need a variable to keep track of whether the video should be made bigger or smaller.
<!DOCTYPE html>
<html>
<head>
<title>Simple animations in HTML5</title>
</head>
<body>
<h2> Optical Illusion </h2>
<video id="illusion" width="640" height="480" controls>
<source src="Illusion_movie.ogg">
</video>
<div id="buttonbar">
<button onclick="changeSize()">Big/Small</button>
</div>
<p>
Watch the animation for 1 minute, staring at the centre of the image. Then look at something else near you.
For a few seconds everything will appear to distort.
Source: Wikipedia:Illusion movie
</p>
<script>
var myVideo=document.getElementById("illusion");
var togglesize = false
if togglesize == true
{
function changeSize()
{
myVideo.width=800;
togglesize = false;
}
}
else
{
function changeSize()
{
myVideo.width = 400;
togglesize = true;
}
}
</script>
</body>
</html>
Attache this function on click event;
var littleSize = false;
function changeSize()
{
myVideo.width = littleSize ? 800 : 400;
littleSize = !littleSize;//toggle boolean
}
http://jsfiddle.net/uNLHL/
Related
I'm trying to make it so that when you click on a separate element it pauses the current song playing from a different element. In addition I had previously made it so when you click on the same element after it started playing audio it would pause that audio, but when you click on a different element with the same function it breaks.
var paused = true;
var song;
var songPlaying;
function playSong(x) {
song = x;
if(songPlaying != song){
document.getElementById(songPlaying).pause();
}
if(paused == true){
document.getElementById(song).play();
paused = false;
songPlaying = song;
} else {
document.getElementById(song).pause();
paused = true;
}
}
Is there anyway I can fix this? Will I have to make a different function for every song?
EDIT 1: Here the HTML my for the sections I'm using as well, each audio file has an ID that is called as a parameter in the function inside onclick
<div class="album">
<img src="assets/BattalionsOfFear.png" onclick="playSong('bofSong')">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>
<div class="album">
<img src="assets/FollowTheBlind.png" onclick="playSong('bfsSong')">
<h1>Follow the Blind</h1>
<p>Released in 1989</p>
</div>
<!--- Audio -->
<audio id="bofSong">
<source src="assets/BattalionsOfFear.mp3">
</audio>
<audio id="bfsSong">
<source src="assets/BanishFromSanctuary.mp3">
</audio>
EDIT 2:
In attempting Laif's solution
I have tried adding the 'song' class to my HTML img elements and linked it to my audio element with the 'song1' class yet it still is not working. Am I doing the classes wrong or is it something with the way I have put them down?
<div class="album">
<img src="assets/BattalionsOfFear.png" class="song song1">
<h1>Battalions of Fear</h1>
<p>Released in 1988</p>
</div>
<audio id="bofSong" class="song1">
<source src="assets/BattalionsOfFear.mp3">
</audio>
Each song should share the same class so that you can do something like this:
<html>
<div class="song"></div>
<div class="song"></div>
</html>
var songs = document.querySelectorAll(".song");
function playSong(e) {
songs.forEach(el => {
el.style.play();
});
e.currentTarget.pause();
};
songs.forEach(el => {
el.addEventListener("click", playSong);
});
I am working on a HTML page, and I want to have different images, and for each of them a popup video. Using a code (html, css, javascript) I can make this for one video: when I click on my image, a video opens in the same page.
But I need different videos for different pictures, and they all open the same first video. How can I direct each picture to a different video?
I have tried using variables in javascript, to connect the image to a video id, each with their own source (link to the video)
Now I tried to make different javascript functions for each video (numbered 1 and 2)
But they still open the same video
this is the java script code (where I added '1', I added '2' for the other one) (I also tried using the video id)
<script>
window.document.onkeydown = function(e) {
if (!e) {
e = event;
}
if (e.keyCode == 27) {
*lightbox_close1*();
}
}
function *lightbox_open1*() {
var lightBoxVideo = document.getElementById(**"V1"**);
window.scrollTo(0, 0);
document.getElementById('light').style.display = 'block';
document.getElementById('fade').style.display = 'block';
lightBoxVideo.play();
}
function *lightbox_close1*() {
var lightBoxVideo = document.getElementById(**"V1"**);
document.getElementById('light').style.display = 'none';
document.getElementById('fade').style.display = 'none';
lightBoxVideo.pause();
}
</script>
and this is what I have in html
<div id="light">
<a class="boxclose" id="boxclose" onclick="*lightbox_close1*();"></a>
<video id=**"V1"** width="600" controls>
<source src="10 Creamy Satisfying Pasta Dishes.mp4" type="video/mp4">
<!--Browser does not support <video> tag -->
</video>
</div>
<div id="fade" onClick="*lightbox_close1*();"></div>
<div>
<a href="#" onclick="*lightbox_open1*();">
<div class="container">
<img src="Aperitive.jpg" alt="A" class="image" >
<div class="overlay">
<div class="text">Aperitive</div>
</div>
</div>
</a>
</div>
the other one is just the same but 2 instead of 1, the '**' are just for bolding
(I added image overlay in css)
I changed the code around a bit but the concept is the same I think. You want to change the source of the video when you click on another element. In this case an image.
You can put the video in a modal or pop-up window and set it to close on click. (this function is not included in the example)
All you need to do is to add another element to the unordered list and set the on click function to change to the video with the video element id in the arguments.
Full example below just plug your videos into the video1.mp4 and watch the magic happen.
<=========================================
Edited for clarification
=========================================>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My Vid Stuff</title>
<style>
ul{
list-style: none;
text-align: center;
width: 50%;
border: 1px solid black;
}
li{
display: inline-block;
border: 1px solid #ccc;
border-radius: 5px;
width: 100px;
height: 100px;
cursor: pointer;
margin-right: 16px
}
</style>
<script>
//this function takes 2 arguments the video element id
//and the video source.
function changeVid(id, video){
//set the element for the change
var vid = document.querySelector('#' + id + ' source');
//change the source of the element
vid.src = video;
//load the video to play
document.querySelector('#' + id).load();
//logging purposes to see the change in action (optional)
console.log(document.querySelector('#' + id +' source').src);
}
</script>
</head>
<body>
<div class="container">
<div class="video-wrapper">
<video id="myvideo" controls>
<source src="video1.m4v" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
<ul>
<!-- onclick of user set myvideo <video> to the video source specified -->
<li onclick="changeVid('myvideo', 'video1.m4v')" > Cat Video 1</li>
<li onclick="changeVid('myvideo', 'video2.m4v')" > Cat Video 2</li>
</ul>
</div>
</body>
</html>
I have a problem with the custom cursor image when hovering over a video element.
HTML
<video id="videoPlayer">
<source src="video/sanaa-faizal.mp4" type="video/mp4">
<source src="video/sanaa-faizal.ogg" type="video/ogg">
</video>
SCRIPT
<script>
var videoPlayer = document.getElementById('videoPlayer');
// Auto play, half volume.
videoPlayer.volume = 1;
// Play / pause.
videoPlayer.addEventListener('click', function () {
if (videoPlayer.paused == false) {
videoPlayer.pause();
videoPlayer.firstChild.nodeValue = 'Play';
} else {
videoPlayer.play();
videoPlayer.firstChild.nodeValue = 'Pause';
}
});
</script>
CSS
video {
max-width: 100%;
height: auto;
cursor: url(../img/icon-play.png), auto;
}
Now the custom cursor image does appear correctly over the video element BUT only when you move the cursor. As soon you stop moving the cursor it goes back to default. Does anybody have a clue how to fix this?
Currently i have a bxSlider, which has a video on the second slide. I've got the video working inside of the slider fine with the video tag. But what I'm trying to do is get the video to play once the slide is active and current.
This is my current on slide after.
onSlideAfter: function(currentSlide, totalSlides, currentSlideHtmlObject){
$j(currentSlide).addClass('active-slide');
if(currentSlideHtmlObject == 1){
var video = document.getElementById("video");
console.log(video.play());
} else if(currentSlideHtmlObject == 2 || currentSlideHtmlObject == 0) {
$j('video')[0].currentTime = 0;
}
modifyDelay(currentSlideHtmlObject);
}
Ignore my console log, I was just seeing if the .play did anything. It doesn't. Yet the video doesn't seem to play once the slide shows. If i set the video to auto play it will work, but this just doesn't seem to work.
If I run:
document.getElementById("video").play();
I get the following: (which i don't fully understand).
Promise {[[PromiseStatus]]: "pending", [[PromiseValue]]: undefined}
Thanks
You simply use the callback onSlideBefore(). More details in the source in the comments.
SNIPPET
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Multi BxSlider</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.css" />
<style>
/* This centers the img and video */
img,
video {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<ul class="bx">
<li data-idx="0">
<img src="http://dummyimage.com/640x360/000/fff.png&text=1">
</li>
<li data-idx="1">
<!-- Set each video id so that it corresponds with the `data-idx`
So if slide <li> is data-idx="1", then video id="vid1"-->
<video id="vid1" class="vid" src="http://techslides.com/demos/sample-videos/small.mp4" controls></video>
</li>
<li data-idx="2">
<img src="http://dummyimage.com/640x360/000/fc0.png&text=3">
</li>
<li data-idx="3">
<img src="http://dummyimage.com/640x360/000/0ff.png&text=4">
</li>
<li data-idx="4">
<img src="http://dummyimage.com/640x360/000/b52.png&text=5">
</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.2.14/jquery.bxslider.min.js"></script>
<script>
var bx = $(".bx").bxSlider({
pager: false,
nextText: '',
prevText: '',
infiniteLoop: false,
/*
This callback will fire a function
before a slide completes it's
course to it's destination
*/
onSlideBefore: autoPlay
});
/*
This function just uses the `to` parameter
I put all of them there because bxSlider expects
them there, I have bad luck if I don't... don't ask:P
*/
function autoPlay($ele, from, to) {
/*
idx is the slide index number
if there is a video within
the slide then play it.
*/
var idx = parseInt(to, 10);
var vid = document.querySelector('#vid' + idx);
if (vid) {
vid.play();
}
}
</script>
</body>
</html>
If you're trying to get the 1st slide in the show to play you can do that using onSliderLoad() - and using a wrapper method to get both to work.
<script type="text/javascript">
$(document).ready(function(){
$('.bxslider').bxSlider({
video: true,
onSliderLoad: autoPlay,
onSlideBefore: autoPlayWrapper
});
});
// Calls the autoPlay function with the index of the next slide
function autoPlayWrapper(asdf,asdf,index){
autoPlay(index);
}
// play the video in the slide at index
function autoPlay(index){
var idx = parseInt(index,10);
var vid = document.querySelector("#vid"+idx);
if(vid){
vid.play();
}
}
</script>
I want to use a video as a background that automatically stretches to the whole screen,in such a way that if a page is loaded then just before the loading of the content a video plays for 5 sec then it pauses and contents are loaded and again start playing if user clicks on another link,and the user will not be redirected before the video finishes.
$(function() {
var BV = new $.BigVideo();
BV.init();
BV.show('http://video-js.zencoder.com/oceans-clip.mp4');
});
my code is working fine its just that I don't know how to play the video just before redirecting to another page without using an intermediate page
<script type="text/javascript">
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
} else {
video.pause();
button.textContent = ">";
}
}
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
}
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime += value;
}
</script>
</head>
<body>
<video id="Video1" >
// Replace these with your own video files.
<source src="demo.mp4" type="video/mp4" />
<source src="demo.ogv" type="video/ogg" />
HTML5 Video is required for this example.
Download the video file.
</video>
<div id="buttonbar">
<button id="restart" onclick="restart();">[]</button>
<button id="rew" onclick="skip(-10)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>
Think you need something like this:
$( "a" ).click(function( event ) {
event.preventDefault();
var link = $(this).attr('href');
BV.play();
BV.addEvent("ended", endFunc);
function endFunc(link) {
window.location = link;
};
});
<!DOCTYPE html>
<html>
<body>
<video width="320" height="240" controls="controls" preload="auto">
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</body>
</html>