How to have different video popup-s in the same webpage? - javascript

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>

Related

How do I get this button to add a class to an element? (No JQuery Please)

I am trying to get a video to rotate when a button is click on. I am really rusty on my beginner JS skills and can't figure this simple thing out. Anyways maybe I am getting mixed up but can someone explain to me why this isn't working?
let video = document.querySelector('.video');
let rotateBtn = document.querySelector('.rotate-btn');
function addRotation() {
video.classList.add('.video-rotate');
}
rotateBtn.addEventListener('click', function() {
addRotation(video);
});
* {
box-sizing: border-box;
}
#demo-container {
text-align: center;
}
.video-rotate {
transform: rotate(270deg);
}
<div class="live-demo">
<h1 class="live-demo-title">Live Demo</h1>
<div class="rotate">
<button class="rotate-btn">Rotate</button>
</div>
<div id="demo-container">
<video class="video" width="500px" height="700px" controls autoplay>
<source src="media/myFlix-Iphone-LiveDemo.mp4" type="video/mp4">
<source src="media/myFlix-Iphone-LiveDemo.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
I'm not too sure if this is the answer, but instead of
video.classList.add(".video-rotate");
do
video.classList.add("video-rotate");
So remove the dot in front of the video-rotate.
It seams your addRotation() function implementation takes a video parameter but the actual function is not accepting it. And also you need to add the class name without the period like so
function addRotation(video) {
video.classList.add('video-rotate');
}
rotateBtn.addEventListener('click', function() {
addRotation(video);
});
Hope this works :)

toggle videos in hero

I am trying to have 2 different toggle videos as the hero. I will call them Video A and Video B. I want video A to autoplay on the homepage. I have a play button on video A. I want two things to happen when the play button is clicked:
hide Video A.
show video B.
I have successfully hidden Video A when the play button is clicked, but Video B is not visible (I can hear it playing, but cannot see it). I think it is a CSS problem, but am not sure.
Video B is too large to upload (I am using WordPress), so I have it as an iframe. Video A is within a video tag.
HTML:
<video playsinline autoplay muted loop id="poster-video" onclick="hideVid()">
<source src="video.mp4" type="video/mp4">
</video>
<div id="full-video" style="visibility:hidden" onclick="showVid()">
<iframe src="https://player.vimeo.com/video/?autoplay=1&loop=1&title=0&byline=0&portrait=0" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
</iframe>
</div>
<div id="xbut">
<span style="cursor:pointer" onclick="hideVid();showVid()">
<div class="ctrbutton"><img src="play-button-dark.png">
</div>
</span>
</div>
CSS:
video {
object-fit: cover;
width: 100vw;
position: absolute;
top: 0;
left: 0;
}
js:
function showVid() {
document.getElementById("full-video").style.display = "block";
}
function hideVid() {
document.getElementById("poster-video").style.display = "none";
}
when you hide video A also set video B visibility on true with

Unable to load youtube video using <video> tag where youtube url is inputted in textfield

I'm working on a modal window which allows user to either 1.) paste a video url or 2.) select a file from local drive then get a preview using html5's <video>tag.
Option 2.) Selecting a video file locally work perfectly. However, when I paste a youtube video url on input text field, the video player shows a loading indicator then stops. You can't play the video and doesn't seem to load successfully.
I checked Google Chrome's inspector and get this message
Cross-Origin Read Blocking (CORB) blocked cross-origin response
https://www.youtube.com/... with MIME type text/html.
I suspect the problem is in this line.
$('#modalInput_pasteURL').on('input',function(e){
var videoUrl = $('#modalInput_pasteURL').val().trim();
$(".video").attr("src", videoUrl);
});
I read while doing research that <iframe> must be used to contain or play a youtube video from a url. In this case, I'd like to use just <video> tag so that I only have one video container.
What am I missing? Any suggestions?
Below is are the code snippets.
HTML file
<label>Paste Url here</label>
<input type="text" class="modal_inputbox" id="modalInput_pasteURL"/><br>
<label>Select Video</label>
<input type="file" class="modalbtn_browseFiles" id="modalBtn_choose_video_file" value="Browse Video" accept="video/*"/><br>
<label>Video Preview</label>
<div class="modalContainer_filePreview" id="modalContainer_videoPreview">
<video controls class="video" width="510" height="200">
</video >
</div>
JS file
$('#modalInput_pasteURL').on('input',function(e){
var videoUrl = $('#modalInput_pasteURL').val().trim();
$(".video").attr("src", videoUrl);
});
$("#modalBtn_choose_video_file").on('change',function(event){
var fileInput = document.getElementById('modalBtn_choose_video_file');
var fileUrl = window.URL.createObjectURL(fileInput.files[0]);
$(".video").attr("src", fileUrl);
});
Thank you.
After doing some research and also taking the comment of zer00ne and Adam McGurk into consideration, I realized that the best way to load the youtube video url is through <iframe> then the problem of isolating or obtaining the youtube video's id came up.
Then, I ended up finding a related resource and answer here in SO which solved my problem.
function getYoutubeVideoId(url) {
var regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var match = url.match(regExp);
if (match && match[2].length == 11) {
return match[2];
} else {
return 'error';
}
}
$('#modalInput_pasteURL').on('input',function(e){
var videoUrl = $('#modalInput_pasteURL').val().trim();
var videoId = getYoutubeVideoId(videoUrl);
$('#modalContainer_videoPreview').html('<iframe width="510" height="200" src="//www.youtube.com/embed/' + videoId + '" frameborder="0" allowfullscreen></iframe>');
});
This should serve as reference to others who are trying to accomplish the same effect when pasting a youtube url in a text field and loading it to a container such as an <iframe> which works best.
YouTube videos can be embedded into a webpage by either using a <div> or an <iframe> tag and loading YouTube IFrame Player API. The following Demo is a modification of the OP code. It can play either a standard video or a YT video. The Stack Snippet cannot play YouTube videos on SO site, so to properly test it, you either copy and paste the entire code elsewhere or go to this Plunker.
Note: There is some code commented out that is included should you want to load the YT API in order to control the YT player programmatically.
Plunker
Demo
Details commented in Demo
The YouTube video will not play on SO due to sandbox, go to Plunker for a fully functional Demo
/* If you want programattic control over the YT Player uncomment
|| the following block and the block after the next block
*/
/*/ Load YouTube IFrame Player API
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
*/
// Reference video tag
var vid = document.getElementById('vid');
/*/ Declare YT Player
var ytv;
// Define YT Player
function onYouTubeIframeAPIReady() {
ytv = new YT.Player('ytv');
}
*/
// Seup switch behavior
$('.switchBtn').on('click', function(e) {
$('.switchBtn').removeClass('act');
$(e.target).addClass('act');
});
// Delegate input event to #pasteURL
$('#pasteURL').on('input', function(e) {
// Get the url string
var videoUrl = $('#pasteURL').val().trim();
// if the "Standard Video" switch is active...
if ($('.v').is('.act')) {
// ...enable controls on vid...
vid.controls = true;
// ...set src to url string...
vid.src = videoUrl;
// ...reset vid so it cues new url
vid.load();
// ...otherwise...
} else {
// ...pause vid...
vid.pause();
// ...reset vid...
vid.currentTime = 0;
// ...remove vid controls...
vid.controls = false;
// ...set ytv src to new url
$('#ytv').attr('src', videoUrl);
}
});
$("#file").on('change', function(event) {
var fileInput = $('#file')[0];
var fileUrl = window.URL.createObjectURL(fileInput.files[0]);
$("#vid").attr("src", fileUrl).prop("controls", true);
});
input,
label {
display: inline-block;
font: inherit;
margin: 10px 0 0 0;
}
input[type=text] {
width: 350px;
}
.group {
pointer-events: none;
opacity: 0.4;
}
.switchBtn {
width: 110px;
height: 18px;
margin: 15px -2px 10px -2px;
border: 3px outset grey;
padding: 2px 3px 0;
cursor: pointer;
}
.switchBtn.act {
background: tomato;
color: #fff
}
.switchBtn.act~.group {
pointer-events: auto;
opacity: 1;
}
.switchBtn.v {
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
text-align: right;
}
.switchBtn.y {
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
}
.switch {
display: none
}
.switch:checked+* {
height: 405px;
transition: 1s;
}
<!DOCTYPE html>
<html>
<head>
<!--<link rel="stylesheet" href="style.css">-->
</head>
<body>
<label for='vidURL' class='switchBtn v'>Standard Video</label>
<label for='ytvURL' class='switchBtn y'>You Tube Video</label>
<br>
<fieldset class='group'>
<label>Test Std URL: </label>
<input type='text' readonly value='https://ia800209.us.archive.org/24/items/WildlifeSampleVideo/Wildlife.mp4'>
<br>
<label>Test YT URL: </label>
<input type='text' readonly value='https://www.youtube.com/embed/Ch5MEJk5ZCQ?enablejsapi=1'>
<br>
<label>Paste Url here </label>
<input type="text" id="pasteURL" />
</fieldset>
<label>Select Video </label>
<input type="file" id="file" value="Browse Video" accept="video/*" />
<br>
<label>Video Preview</label>
<figure class="filePreview">
<input id='vidURL' type='radio' name='switch' class='switch'>
<video id="vid" width="100%" height="0"></video>
<input id='ytvURL' type='radio' name='switch' class='switch'>
<iframe id="ytv" type="text/html" width="100%" height="0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</figure>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--<script src="script.js"></script>-->
</body>
</html>
There are a couple of problems here, and it doesn't even necessarily have to do with your code. I didn't even look at your code here, because it's unimportant.
You will not be able to take a YouTube URL and paste it into the src attribute of the video tag and have it play. That just isn't how YouTube works.
YouTube doesn't serve it's videos by plain URLs. Imagine if they did that, anybody could get into the inspect tool and download the video straight from YouTube.
So how do they serve their videos? Through BLOBs:
Here's a pretty good explanation of what a BLOB is: https://developer.mozilla.org/en-US/docs/Web/API/Blob
So you won't be able to just take the URL, it's just not how YouTube works. And so the way I would frame your code would be to have a control statement that detects if there is an iframe tag or not, and if there is, insert just the iFrame, but if there is not, insert your video URL.
Obviously there are many security holes there, but that is out of the scope of this answer. If you want to go more of the route that I outlined a little bit, do some research, ask another question, and we'd be glad to help you out!

Html5 video not playing on bxslider

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>

jQuery to autoplay HTML5 audio

Ok, so let me tell you where I'm at. The audio file displays and loads. you can click play to play it. The jQuery isn't autoplaying the material. I'm having to load in the file based on the href of the link. Code is below. Trying to get this to autoplay.
$('.voiceLink a', resbox).click(function(e){
e.preventDefault();
var link = $(this).prop('href'),
audio = $('.audioControl', el.parent());
audio.find('source').prop('src', link);
audio.parent().css('display','inline-block');
audio.find('audio').load();
setTimeout(audio.find('audio').play(), 100);
$(window).scrollTop();
});
resbox = The wrapper box.
The HTML Element:
<div class="audioHide" style="display: none;">
<div class="audioControl" style="position:relative; top:10px; left:50px; display:inline-block;">
<audio controls><source src="#" type="audio/mpeg">
Not Supported
</audio>
</div>
</div>
Example Link:
<a target="_blank" href="http://relatientsounds.s3-website-us-east-1.amazonaws.com/recordings/2456266.mp3">2456266</a>
Edit
try this
audio.find('source').prop('src', link);
audio.parent().css('display','inline-block');
audio.find('audio').load();
//this line
audio.find('audio')[0].play();
Demo http://jsfiddle.net/m25kfy57/1/

Categories