I'm using Vimeo's API mostly because I want to play the video through my own button.
The only problem I came across is that when I'm trying to change the buttons content like <button>Play</button> to <button>Play me</button> the video won't play. Why is that?
Fiddle here to see what I mean.
The JS from Vimeo's API.
$(function() {
var iframe = $('#player1')[0];
var player = $f(iframe);
var status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause(id) {
status.text('paused');
}
function onFinish(id) {
status.text('finished');
}
function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
}
});
I solved my own question...
What I figured out was that the API is looking for what's inside the button. In this case:
Play...
So what I did was <button data-action="play">Play this video</button>
and in the JS I did following thing:
$('button').bind("click", function() {
player.api($(this).data("action"));
});
Related
I'm trying to get the news comments on yahoo, where there is a link "See reactions", with the following id: "caascommtbar-wide" and tried to get the element with CasperJS, Selenium, ScrapySharp, to click on the link and display the comments, but in those tools you never find the element and I've even tried using the XPath
CasperJS:
casper.then (function () {
if (this.exists ('a.caascommtbar-anchor')) {
this.echo ("It exists");
} else
this.echo ("It Does not Exist");
});
casper.then (function () {
// Click on 1st result link
this.click ('a.caascommtbar-anchor');
});
Selenium:
driver.FindElement (By.Id ("caascommtbar-anchor")). Click ();
Does anyone know why you can not access this part of the HTML code where the comments are located?
It should be noted that the same thing happens to me when trying to access the Facebook comments contained in the news forums.
As Isaac said the part of pages are loaded asynchronously, so you should implement waitFor steps in your code. Here is the code that does just that.
var url = "https://es-us.vida-estilo.yahoo.com/instagram-cierra-la-cuenta-de-una-modelo-por-ser-gorda-103756072.html";
var casper = require('casper').create({
viewportSize: {width: 1280, height: 800},
});
casper.start(url, function() {
this.echo('Opened page');
});
casper.waitForSelector('a.comments-title', function() {
this.click('.comments-title');
});
casper.waitForSelector('ul.comments-list > li', function() {
this.echo(this.getHTML('ul.comments-list'));
});
casper.run();
Hope that helps
The problem was why the page was not loaded yet and I had to wait, I'm new with casperjs.
Now I have the problem when trying to remove all comments along with their answers, but can not find an algorithm to help me. Try to press all the answer buttons, but only get the first answers to the first comments.
casper.waitForSelector('button.showMore', function () {
this.click('.showMore');
}, function onWaitTimeout() {
});
var buttons;
casper.waitForSelector('ul.comments-list', function getLinks() {
buttons = this.evaluate(function ()
{
var buttons = document.getElementsByClassName('replies-button');
buttons = Array.prototype.map.call(buttons, function (button) {
button.click();
casper.waitForSelector('ul.comments-list', function () {
casper.wait(3000, function () {
});
});
return button.getAttribute('class');
});
return buttons;
});
}, function onWaitTimeout() {
});
function wait5seconds() {
casper.wait(3000, function () {
});
}
casper.waitForSelector('ul.comments-list > li', function () {
var x = this.getHTML('ul.comments-list');
this.echo(x);
}, function onWaitTimeout() {
});
casper.run();
My purpose is detected if one of the two videos are playing and console.log it.
I try to build dynamic videos play detect.
I read video ID when the user clicks on the play button, and then use the video ID to assign it video for addEventListner but it just works with my first video. the second video doesn't work and
$(function(){
var videoid = "";
$('video').bind('play', function (e) {
videoid = $(this).attr('id');
});
$('video').on("click", function() {
// test if global variable work
console.log(videoid);
});
var abc = 'video1';
document.getElementById(videoid).addEventListener('playing', function(){
console.log('play' + videoid);
})
document.getElementById(videoid).addEventListener('pause', function(){
console.log('3443');
})
document.getElementById(videoid).addEventListener('ended', function(){
console.log('242434');
})
});
what did I wrong?
http://jsfiddle.net/fbc7nn0o/51/
The video variable in the global scope has not been defined, and thus will fall on document.getElementById(variableName) || document.getElementsByName(variable) || undefined (cf Do DOM tree elements with ids become global variables?).
So addEventListener will only be called from the first <video> element, which as the id "video"...
What you want is
$('video').on({
play : onplay,
playing: onplaying,
pause: onpause
...
})
where onplay, onplaying, onpause ... are event handlers functions. e.g function onplaying(e){ $('.text').fadeOut(); console.log('dfdgd'); }.
Also note that $('#'+$(this).attr('id'))[0] is perfect non-sense.
Just use this.
It work for me.
$('video').bind('play', function (e) {
var videoid = $(this).attr('id');
document.getElementById(videoid).addEventListener('playing', function(){
console.log('play' + videoid);
});
document.getElementById(videoid).addEventListener('pause', function(){
console.log('3443');
});
document.getElementById(videoid).addEventListener('ended', function(){
console.log('ended');
});
});
I'm trying to make an image appear when the video reaches the end but it's not working and for now I have this code:
// Change image to video on click(working)
$('#image').click(function() {
video = '<video id="video" muted autoplay poster="/img.png" controls style="width: 100%; height: auto; z-index: 999999;"><source src="/video.m4v"></video>';
jQuery(this).replaceWith(video);
});
// Detect end of video(not working)
$('video').on('ended', function() {
alert("End of te video!");
});
The alert is not popping out, keep in mind that this code works fine on desktop, but not on mobile, any suggestion would be appreciated,
Thanks!
You need to create a new EventListener for the ended events
Example:
video.addEventListener('ended', function(){
//Your Code goes here
})
success: function (video, domObject) {
// add event listener
YourMediaElement.addEventListener('ended', function(e) {
//Do Stuff here
}, false);
i copied the code from the below link checck that for more info...
How to call a function on video end ? (HTML5 and mediaelementjs)
We have a video (vimeo) link we would like our users to watch.
Each video is followed by a short questionnaire.
Our intent is to not make the questionnaire visible to the user until the user had clicked open the video for viewing.
I can only think of embedding the code below inside another iframe just to hide the link.
Is this possible?
Is there an alternative approach to this?
<!DOCTYPE HTML>
<html>
<head>
<meta name="google" value="notranslate" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Dog Smoking</title>
<style type="text/css">
body {
padding-top:0;
padding-bottom:0;
padding-left:0;
padding-right:0;
margin-top:0;
margin-bottom:0;
margin-left:0;
margin-right:0;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="javascript/froogaloop.js"></script>
<script src="javascript/froogaloop.min.js"></script>
<script type="text/javascript">
var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause(id) {
status.text('paused');
}
function onFinish(id) {
status.text('finished');
}
function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
}
player.addEvent('ready', function() {
status.text('ready');
$("#survey_button").show(); // <-- or whatever
});
</script>
</head>
<body>
<iframe src="http://player.vimeo.com/video/4644119?api=1" width="400" height="375" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<a href="http://show.aspx?testid=27#activate"
target="target-iframe"
onclick="frames['target-iframe'].document.getElementById('activate')
.scrollIntoView();return false">Click</a>
</body>
</html>
I would use the JS API for video and use the event callbacks built into the player to make the questionnaire visible.
==UPDATE==
Ok - so that link is a step by step example of how to incorporate the JS controls and callbacks for the player. But... here we go..
step 1 is to add the "?api=1" after your initial embed code.
step 2 is to load their Froogaloop library so you can listen for events...
step 3 would be to set up a callback to handle whatever event you want to listen to... The example right from this page is fantastic:
var iframe = $('#player1')[0],
player = $f(iframe),
status = $('.status');
// When the player is ready, add listeners for pause, finish, and playProgress
player.addEvent('ready', function() {
status.text('ready');
player.addEvent('pause', onPause);
player.addEvent('finish', onFinish);
player.addEvent('playProgress', onPlayProgress);
});
// Call the API when a button is pressed
$('button').bind('click', function() {
player.api($(this).text().toLowerCase());
});
function onPause(id) {
status.text('paused');
}
function onFinish(id) {
status.text('finished');
}
function onPlayProgress(data, id) {
status.text(data.seconds + 's played');
}
So, depending on when you want your survey to show, you can just tap into one of those...
player.addEvent('ready', function() {
status.text('ready');
$("#survey_button").show(); // <-- or whatever
});
make sense?
============= ANOTHER UPDATE ================
here's a working fiddle: http://jsfiddle.net/QkGRd/10/. You may want to read a bit about embedding resources and how the jsfiddle works as well.
TL;DR Answer
Yes you can have an iframe inside an iframe. Though it's generally not a good idea in terms of performance.
I am refreshing an iframe on my page when someone clicks on an image with this code:
$("img").click(function() {
$('#space iframe').attr('src', function(i, val){ return val; });
openBox();
});
But I only want to execute openBox() function after the iframe is done refreshing.
How can I achieve something like that?
Using jQuery:
$('#frameId').on('load', function() {
//code to execute after frame loaded
});
Using vanilla JavaScript:
document.getElementById('frameId').addEventListener('load', function() {
//code to execute after frame loaded
});
While this isn't exactly your problem, here is how you listen for an load event on an iFrame.
HTML
<iframe id="frame"></iframe>
<button id="loadFrame">load frame</button>
JS
$("#loadFrame").click(function () {
$("#frame").attr("src", "http://www.google.com");
$("#frame").on("load", function () {
alert("ad");
});
});
Fiddle: http://jsfiddle.net/7RL35/4/