I found a very helpful guide explaining basic vimeo-controllers with froogaloop.
I have very limited understanding of javascript and would need some assistance remapping the controller buttons to divs.
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<button>Play</button>
<button>Pause</button>
<div class="play">Play</div> <!-- I want to use this div instead of buttons -->
<script>
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
// When the player is ready, add listeners for pause, finish.
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
});
</script>
The codepen I've been referring:
https://codepen.io/bdougherty/pen/JgDfm
Thanks!
Honestly I calling something according to the innerhtml of a button makes for a weird decision. It makes the code confusing and will break as soon as a designer decides that an arrow is better than play.
But for your question I would go with this:
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
// When the player is ready, add listeners for pause, finish.
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
});
// Call the API when a button is pressed
$('.play').bind('click', function() {
player.api('play');
});
$('.pause').bind('click', function() {
player.api('pause');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://f.vimeocdn.com/js/froogaloop2.min.js"></script>
<iframe id="player1" src="https://player.vimeo.com/video/76979871?api=1&player_id=player1" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<div class="play">Play</div>
<!-- I want to use this div instead of buttons -->
<div class="pause">Pause</div>
Related
I am getting Error while playing this video.
Below is my Code.
var videoWrapperId = '[data-title="cf-vimeo-video"]';
var videoPlayer = null;
$(function () {
handleVimeoPlayer()
});
function handleVimeoPlayer() {
videoFrameSrc = $('iframe', videoWrapperId).attr('src');
$('iframe', videoWrapperId).attr('src', videoFrameSrc);
videoPlayer = new Vimeo.Player($('iframe', videoWrapperId));
console.log("Log : " , videoPlayer)
videoPlayer.ready().then(function () {
});
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://player.vimeo.com/api/player.js"></script>
<div>
<div data-de-type="video" data-de-editing="false" data-title="cf-vimeo-video" data-ce="false" data-trigger="none" data-animate="fade"
data-delay="500" data-video-type="vimeo" style="outline: none; cursor: pointer;" aria-disabled="false" data-element-theme="customized"
data-vimeo-autoplay="yes">
<iframe src="https://player.vimeo.com/video/347119375?autoplay=1&muted=1" frameborder="0" allow="autoplay; fullscreen"
allowfullscreen></iframe>
</div>
</div>
When I run this Code,
I shows me this error.
Uncaught Error: The player element passed isn’t a Vimeo embed. at new Player (player.js:2)
Any help would be great.
It could be that your iframe is lazy-loaded and therefore isn’t ready when you call it.
So Here's the video that i'm embedded to my website.
Fiddle.
<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
The problem is, it's small and the play and other buttons button covers the half screen.
so is there any way to add a layer image on the player and when you click on the image the video should start playing.
http://codepen.io/anon/pen/grPeyq
this is what I could come up with, you can replace the button with an image,
button is disabled until video player is "ready", this requires jquery 2.1.4
$(function() {
document.getElementById("playbutton").disabled = true;
var player = $('iframe');
var playerOrigin = '*';
// Listen for messages from the player
if (window.addEventListener) {
window.addEventListener('message', onMessageReceived, false);
} else {
window.attachEvent('onmessage', onMessageReceived, false);
}
function onMessageReceived(event) {
var data = JSON.parse(event.data);
console.log(data.event);
if (data.event === "ready") {
//attach ready function to the image
document.getElementById("playbutton").disabled = false;
$('#playbutton').click(function() {
player[0].contentWindow.postMessage({
"method": "play"
}, playerOrigin);
$(this).remove();
});
}
}
});
#container {
position: relative
}
<div id="container">
<button style ="position:absolute; top:0; left:0;width: 300px;height:169px" id="playbutton">
Play
</button>
<iframe src="https://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0&api=1" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
I would offer you this solution :
http://jsfiddle.net/yehiaawad/hgtvqatm/2/
HTML
<div id="vidFrame" class="play">
<iframe id="vimeo-video" src="http://player.vimeo.com/video/152985022?title=0&byline=0&portrait=0" width="300" height="169" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
<img id="vimeo-id" width="300" height="169" src="" />
</div>
JAVASCRIPT:
callback=?', {format: "json"}, function(data) {
$("#vimeo-id").attr("src",data[0].thumbnail_large);
});
$("#vimeo-id").on("click",function(){
$(this).fadeOut();
var player=$f($("#vimeo-video")[0]);
player.api("play");
})
CSS:
#vimeo-id,iframe{
position:absolute;
}
#vimeo-id{
cursor:pointer;
}
I have some issue:
I have some container, and three elements below this div. Three elements are images or iframe with vimeo embedded movie.
In first case i have :
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
And below:
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span>
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</span>
</div>
And Jquery:
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
And now what this code does:
On clicking on video2.jog or video3.jpg, iframe in <div id="media-content"> is replaced with this clicked image. And this is ok.
But i want to show vimeo movie <div id="media-content"> on click at iframe inside.
So it's simple content swap, but the problem is, that i don't know how "transfer" vimeo iframe do another div, as clicking on it does nothing.
Thank You for any reply.
PS: To address this question, i send image, it shows 3 red spans and one big green div. CLicking on span should set his attr (in this case img).And this work, problem is,that clicking on vimeo span should open video in green div.enter image description here
When the browser loads/makes ready the DOM then iframe isn't included instantly. For the shake javascript or jquery canot get the inside element of the iframe as DOM haven't it, rather javascript or jquery only get the iframe tag.This is a critical and great problem with jquery & iframe when iframe load thing from different domain/host.
You can also get the iframe element by getting the span with jquery. But for this you have to give the 3rd span a a div and have to click on the div not on the iframe content to get desired solution.
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<div id="media-content">
<iframe src="https://player.vimeo.com/video/1271?api=1" width="100%" height="400" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="media-list" id="media-list">
<span> <?php echo $this->Html->image('placeholder/video2.jpg');?> </span>
<span> <?php echo $this->Html->image('placeholder/video3.jpg');?> </span>
<span >
<div style="border: 1px solid red; z-index:3;width:80px;height:80px;padding:30px;">
<iframe src="https://player.vimeo.com/video/127561?api=1" width="100%" height="100%" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</span>
</div>
<script>
$(document).ready(function () {
var media = $('#media-list img');
var mediaContainer = $('#media-content');
$(media).on('click',function(e){
var vals = $(this).parent().html();
$(mediaContainer).html(vals);
e.preventDefault();
console.log (e.target);
});
var media2 = $('#media-list div');
$(media2).on('click',function(e){
var vals = $(this).html();
$(mediaContainer).html(vals).height("70%").width("70%");
e.preventDefault();
console.log (e.target);
});
});
</script>
I have created popup window with the div tag when user click to watch specified video:
<div class="popup" >
<h2 class="popup_header center">Tutorial - 2</h2>
<p class="popup_sub_header center"> Tutorial Label </p>
<div class="popup_video_container">
<div class="video_frame pop_mode" id="popUpVideoWindow">
<iframe width="640" height="320" src="https://www.youtube.com/embed/link" frameborder="0" allowfullscreen="" hspace="0" vspace="0"></iframe>
</div>
<div class="tutorial_description">
</div>
</div>
<a class="close" href="#close"></a>
</div>
Now when i close this window video does not going to stop, continuing buffering and playing with other stuffs.
I have gone through other questions and found afterClose, on('hidden') method to work on class and idlike this one:
$('.popUpVideoWindow').on('hidden',function(){
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
and
$("#video_frame").bind('afterClose', function(){{
$iframe = $(this)find("iframe");
$iframe.attr("src", $iframe.attr("src"));
console.log("Link set:" , $iframe.attr("src"));
});
but it doesnt going to help me what i want. I want to stop playing the video when i close that popup div.
var figure = $(".video");
var vid = figure.find("video");
[].forEach.call(figure, function (item,index) {
item.addEventListener('mouseover', hoverVideo.bind(item,index), false);
item.addEventListener('mouseout', hideVideo.bind(item,index), false);
});
function hoverVideo(index, e) {
vid[index].play();
}
function hideVideo(index, e) {
vid[index].pause();
}
Check this example with this JSFiddle
Make necessary changes.
check it please..regds
This question already has answers here:
How do I get jQuery to load? [closed]
(2 answers)
Closed 9 years ago.
How do i get jQuery to load once I click on the button. So far it loads when the page is loading. I want it to load after clicking the button! i tried a lot of things and they haven't worked so far please help...
this my code so far for it
watch
<div style="display:none">
<div id="image_link">
<div class="imageWrapper">
<div class="image">
<iframe src="http://www.putlocker.com/embed/E25FA20CE8643E5F" width="600" height="360" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#click").fancybox({'scrolling': 'no','titleShow': false,'onClosed':
function(){$("#login_error").hide();}});
});
</script>
If you want to dynamically load jQuery on your button click (it would help if you explained "why" you want to do that), then you can use a function like this to load it:
function loadScript(sScriptSrc, oCallback) {
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = sScriptSrc;
// most browsers
oScript.onload = oCallback;
// IE 6 & 7
oScript.onreadystatechange = function() {
if (this.readyState == 'complete') {
oCallback();
}
}
oHead.appendChild(oScript);
}
Note that your other jQuery code can't be run until AFTER jQuery is loaded. Your code could look like this:
watch
<div style="display:none">
<div id="image_link">
<div class="imageWrapper">
<div class="image">
<iframe src="http://www.putlocker.com/embed/E25FA20CE8643E5F" width="600" height="360" frameborder="0" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
<script type="text/javascript">
function loadScript(sScriptSrc, oCallback) {
var oHead = document.getElementsByTagName('head')[0];
var oScript = document.createElement('script');
oScript.type = 'text/javascript';
oScript.src = sScriptSrc;
// most browsers
oScript.onload = oCallback;
// IE 6 & 7
oScript.onreadystatechange = function() {
if (this.readyState == 'complete') {
oCallback();
}
}
oHead.appendChild(oScript);
}
function jQueryLoaded() {
$("#click").fancybox({'scrolling': 'no','titleShow': false,'onClosed':
function(){$("#login_error").hide();}});
});
}
document.getElementById("myButton").addEventListener("click", function() {
// load jQuery and when it's loaded, call jQueryLoaded
loadScript("jquery.js", jQueryLoaded);
}, false);
</script>
Other reference answers:
How to know if JQuery has finished loading
Javascript multiple Dynamic Insertion
Try this
<script type="text/javascript">
$(document).ready(function(){
$("#click").click(function fancybox(){
'scrolling': 'no',
'titleShow': false,
'onClosed': function(){
$("#login_error").hide();
}
});
});
</script>