I have found a solution to starting/pausing multiple vimeo videos from seperate buttons, but I would like to use images for the play and pause buttons.
Can anyone help me ammend the code? I guess I need to replace the html button code with images and then reference them in the javascript, but I can't seem to get it to work.
Many thanks.
my html is:
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
<div>
<div>
<h1>Player 2</h1>
<div class="api_output"></div>
<iframe id="player_2" src="http://player.vimeo.com/video/3718294?js_api=1&js_swf_id=player_2" width="500" height="281" frameborder="0"></iframe>
<button class="simple" id="api_play">Play</button>
<button class="simple" id="api_pause">Pause</button>
</div>
</div>
The javascript is:
var VimeoEmbed = {};
VimeoEmbed.init = function(e)
{
//Listen to the load event for all the iframes on the page
$('iframe').each(function(index, iframe){
iframe.addEvent('onLoad', VimeoEmbed.vimeo_player_loaded);
});
};
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded ' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('button.simple').bind('click', {'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};
//On document ready
$(document).ready(VimeoEmbed.init);
I think it'll be something like this
<div>
<h1>Player 1</h1>
<div class="api_output"></div>
<iframe id="player_1" src="http://player.vimeo.com/video/7100569?js_api=1&js_swf_id=player_1" width="500" height="281" frameborder="0"></iframe>
<img class="simple" id="api_play" src="play.png">
<img class="simple" id="api_pause" src="pause.png">
<!-- ... same for player 2 -->
And in the js
VimeoEmbed.vimeo_player_loaded = function(player_id)
{
$('#'+player_id).prev('.api_output').append('VimeoEmbed.vimeo_player_loaded ' + player_id+'<br/>');
var loop = 0;
var volume = 100;
//Simple Buttons
$('#'+player_id).nextAll('img.simple').bind('click', {'player_id': player_id}, function(e){
var iframe = $('#'+e.data.player_id).get(0);
iframe.api( $(e.target).attr('id'), null );
});
//API EVENT LISTENERS
VimeoEmbed.setupAPIEventListeners($('#'+player_id).get(0));
};
Related
I want to change the content of iframe by clicking on menu items. But the content of iframe does not refresh for some reason.
HTML
<div class="switcher">
Option 1
Option 2
</div>
<iframe class="switch-target" width="300" height="300" src=""></iframe>
Javascript
var switcher$ = $('.switcher');
var switchTarget$ = $('.switch-target');
switcher$.on('click', switchIframeSrc);
function switchIframeSrc() {
switchTarget$.attr('src', switcher$.val());
}
// call the method on load
switchIframeSrc();
A bit late, but you don't need any JavaScript to do that. Just give your <iframe> element a name attribute and use that name as a target for your hyperlinks.
<div class="switcher">
Option 1
Option 2
</div>
<iframe class="switch-target" width="300" height="300" src="" name="switch-frame"></iframe>
First, you've to prevent the default action that is triggered by the click on an anchor. For this, use the event object and call the following method:
event.preventDefault();
And then, pass the element to switchIframeSrc which triggered the event:
switchIframeSrc(event.target);
var switcher$ = $('.switcher');
var switchTarget$ = $('.switch-target');
switcher$.on('click', event => {
event.preventDefault();
switchIframeSrc(event.target);
});
function switchIframeSrc(anchor) {
switchTarget$.attr('src', $(anchor).attr('href'));
}
// call the method on load
switchIframeSrc();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="switcher">
Option 1
Option 2
</div>
<iframe class="switch-target" width="300" height="300" src=""></iframe>
I am trying to have a light box pop up for videos. it works fine with one video. When trying with multiple videos the 2nd video link dont work. When clicked I get Uncaught TypeError cannot set property 'src' of null.
Nothing happens when clicked but video1 starts in the background you cant see it only her the sound. Any help is appreciated.
here goes JS
// Function to reveal lightbox and adding YouTube autoplay
function revealVideo(div,video_id) {
var video = document.getElementById(video_id).src;
document.getElementById(video_id).src = video+'&autoplay=1'; // adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
function hideVideo(div,video_id) {
var video = document.getElementById(video_id).src;
var cleaned = video.replace('&autoplay=1',''); // removing autoplay form url
document.getElementById(video_id).src = cleaned;
document.getElementById(div).style.display = 'none';
}
here goes html
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg" style="max-width:100%;max-height:100%"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0" width="1280"></iframe>
</div>
</div>
</div>
</div>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="youtube" name="youtube" src="https://www.youtube.com/embed/xxxxxx?rel=0&showinfo=0%20frameborder=0" width="1280"></iframe>
</div>
</div>
</div>
</div>
I think your problem here is that you're using IDs multiple times.
You got id="playme" on both anchor-tags and id="video" on both lightbox-divs.
So yeah. First, you should really only need a single video player -- simply change the src of that player and it should do what you want. The following is messy and ugly and really not the way i'd necessarily do this, but it works. Rather than having multiple lightbox/player elements, there's one. When you click the link, the onClick passes an id, which is matched against an array of objects. If a match is found, it changes the src of a SINGLE video-player element to the matched src and displays it.
From what I'm reading, this may be closer to what you're looking for.
var arrayOfVideos = [{
id: 'youtube',
src: "https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0"
}, {
id: 'youtube2',
src: "https://www.youtube.com/embed/xxxxxx?rel=0&controls=1&showinfo=0%20frameborder=0"
}];
// Function to reveal lightbox and adding YouTube autoplay
revealVideo = function revealVideo(div, video_id) {
// This just shows what we're displaying, purely for debugging.
console.log("Showing the video "+video_id);
// We have a single videoplayer div. We'll simply toggle its src.
var video = document.getElementById("video-player");
// All possible links have been saved as an array of ids and src properties.
// Here, we simply get the first element with the matching id
var videoObject = arrayOfVideos.filter(function(obj) {
return obj.id === video_id;
})
video.src = videoObject[0].src+'&autoplay=1'; // Adding autoplay to the URL
document.getElementById(div).style.display = 'block';
}
// Hiding the lightbox and removing YouTube autoplay
hideVideo = function hideVideo(div, video_id) {
var video = document.getElementById("video-player");
var cleaned = video.src.replace('&autoplay=1', ''); // removing autoplay form url
video.src = cleaned;
document.getElementById(div).style.display = 'none';
}
<a id="playme" onclick="revealVideo('video','youtube')" title="Read more"><img alt="The Boys & Girls Club" src="./content/uploads/2017/02/myimage.jpg" style="max-width:100%;max-height:100%"></a>
<a id="playme" onclick="revealVideo('video','youtube2')" title="Read more"><img alt="The Boys & Girls Club 2" src="./content/uploads/2017/02/myimage2.jpg"></a>
<div class="lightbox" id="video" onclick="hideVideo('video','youtube')">
<div class="lightbox-container">
<div class="lightbox-content">
<button class="lightbox-close" onclick="hideVideo('video','youtube')">Close | X</button>
<div class="video-container">
<iframe allowfullscreen height="720" id="video-player" src="" width="1280"></iframe>
</div>
</div>
</div>
</div>
I have a quiz, and if you get 100%, when you load the last page, it will alert "You got 100%!". Although, it loads in before the background loads in. This is my code:
var chanceoflive1 = parseInt(localStorage.getItem("chanceoflive1"));
var chanceoflive2 = parseInt(localStorage.getItem("chanceoflive2"));
var chanceoflive3 = parseInt(localStorage.getItem("chanceoflive3"));
var chanceoflive4 = parseInt(localStorage.getItem("chanceoflive4"));
var chanceoflive7 = parseInt(localStorage.getItem("chanceoflive7"));
var chanceoflivefinal = (chanceoflive1||0) + (chanceoflive2||0) + (chanceoflive3||0) + (chanceoflive4||0) + (chanceoflive7||0);
var chanceoflivepercent = chanceoflivefinal * 4;
function startup(){
if (chanceoflivefinal == 25) {
alert("You Got 100%!");
}
}
<body onload="startup">
<center>
<h2 class="text">Final Results</h2>
<p id="print" class="text"></p>
<p id="print2" class="text"></p>
<img src="qrcode.jpg" height="300" length="300">
<br>
<div class="wrapper">
<a href="index.html">
<button align=center onclick="handleClick()" id="button">
<canvas width="200" height="50" id="canvas" align=center></canvas>
<span class="text" id="submit">Retry</span>
</button>
</a>
</div>
</center>
</body>
How can I fix this?
You could always do something like this within a script tag:
(function(){ // on document load
alert("Ready!"); // alert "ready"
})();
Oh, and as #Barmar said, to call that function, you need to change startup to startup()
You are just missing (); like this onload="startup();".
Perhaps you can also use
document.onload = startup();
or even
window.onload = startup();
I'm new to javascript and can't figure out the best way to solve this problem.
I have a div called info.
I have dozens of videos, and am constantly adding new videos.
When I click a video, I want to update info.
So I was thinking I need a hidden div with the text, and getElementsByClassName for something like this:
<div class="video"><a href="./video1.mp4" target="videoplayer" onclick="showDescription()><div class="description"><p>description for video1</div>
<div class="video"><a href=./video2.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video2</div>
<div class="video"><a href=./video3.mp4 target="videoplayer" onclick="showDescription()><div class="description"><p>description for video3</div>
and
function showDescription(){
var description = this.getElementsByClassName("description");
document.getElementById("info").innerHTML = description;
{
That doesn't work. Is using getElementsByClassName a good way to do this, or can anyone suggest another way?
Here's the actual html I'm using:
<div id="videoplayer">
<iframe name="VideoPlayer" width="80%" height="100%" src="http://www.youtube.com/embed/videoseries?list=PL5A2FB27789F71E63> </iframe>
</div>
<div id="info">
<p>Welcome</p>
</div>
<div class="thumb"><p>
<img src="http://discolemonade.com/roku/images/thumbs/MusicVideos/MV-ThumbSmallPlaylist.jpg">
Hours of music videos, refreshed often.
</p>
<div class="longinfodiv">
<p class="longinfo">this is the long version of the music video playlist info</p>
</div>
</div>
And the javascript:
function changeInfo() {
var longinfo = document.getElementsByClassName("longinfo");
document.getElementById("info").innerHTML = longinfo;
}
First structure your HTML file properly:
<div class="video">
Link
<div class="description">description for video1</div>
</div>
Then use the following script:
function showDescription(){
var video = this.parentNode;
var desc = video.children[1];
document.getElementById("info").innerHTML = desc.innerHTML;
}
I have a youtube video slideshow which gets populated with the use of a template:
<script id="tFlowplayer" type="text/html">
<div class="rv" id="{{name}}">
<iframe class="{{id_v}}" width="575" height="323" src="{{id_v}}" frameborder="0" allowfullscreen></iframe>
</div>
</script>
when I click on next or prev I need to stop the current youtube embedded video playing:
<nav class="arrows">
<button data-goto="prev" class="arrow arrow-left" rel="prev">Prev</button>
<button data-goto="next" class="arrow arrow-right" rel="next">Next</button>
</nav>
The following is the click event for the navigation, I guess this where the action will be happening:
$('[data-goto]').on('click', function (evt) {
var $this = $(this),
where = $this.attr('data-goto'),
video_id = $('[data-play]').attr('data-id');
if (where === 'prev') {
swiper.prev();
} else {
swiper.next();
}
});