I can't seem to figure out how to capture events with FlowPlayer. I'm loading the scripts from the CDN. Below is what I've attempted to try to catch the onFinish event, but no luck. Any help would be greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="//releases.flowplayer.org/5.4.3/flowplayer.min.js"></script>
<link rel="stylesheet" href="//releases.flowplayer.org/5.4.3/skin/minimalist.css">
<script>
flowplayer("flowplayer", "video.flv", {
onFinish: function () {
alert("Click Player to start video again");
}
});
</script>
<title>FlowPlayer Test</title>
</head>
<body>
<div class="flowplayer">
<video>
<source type="video/flv" src="video.flv">
</video>
</div>
</body>
</html>
From your example code it looks like you are using the flowplayer HTML5 video player. As far as I am aware there is no onFinish event. There is however a finish event which you can bind to. Here's how:
Example
flowplayer(function (api, root) {
api.bind("finish", function () {
alert("Click Player to start video again");
});
});
More information can be found on the flowplayer API docs
Related
I just noticed that a code that worked before in Firefox is throwing errors now
This is a simple Google Apps Script sample code (embedded in a Google spreadsheet) to reproduce the issue:
server side:
function uiTest(){
var html = HtmlService.createTemplateFromFile('ui-test');
var ui = html.evaluate().setXFrameOptionsMode(HtmlService.XFrameOptionsMode.ALLOWALL);
SpreadsheetApp.getUi().showModelessDialog(ui," ");
}
where ui-test html:
<head>
<base href="//polygit.org/components/">
<link rel="import" href="polymer/polymer.html">
<script src="webcomponentsjs/webcomponents.js" type="text/javascript"></script>
<link rel="import" href="paper-material/paper-material.html">
<dom-module id="ui-firefox">
<template>
<paper-material>Can you see me in Firefox?</paper-material>
</template>
<script>
HTMLImports.whenReady(function() {
Polymer({
is: "ui-firefox",
ready: function() {
console.log("Am I ready?");
}
});
});
</script>
</dom-module>
</head>
<body>
<ui-firefox> </ui-firefox>
</body>
The error is as follow ...
The resource from “https://accounts.google.com/ServiceLogin?service=wise&passive=1209600&continue=https://n-47juae2agfc3xqpt4fvdar7apw5jvvjx5nohrjy-0lu-script.googleusercontent.com/webcomponentsjs/webcomponents.js&followup=https://n-47juae2agfc3xqpt4fvdar7apw5jvvjx5nohrjy-0lu-script.googleusercontent.com/webcomponentsjs/webcomponents.js” was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
Any ideas on how to fix/avoid this issue?
With the Firefox release 58 from Jan.23, 2018 this is issue is gone, no longer happening.
Hopefully it'd stay that way ...
So I can get a single query with, for example:
`http://www.omdbapi.com/?t=inception`
How do I get all the movies from the api?
You can't get all the movies from OMDb API, even if you use * it will return an error Too many results.
But you can return multiple results using s parameter. Look at the code sample below using jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Ajax Request</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$.get("http://www.omdbapi.com/?s=inception&apikey=[yourkey]", function(data) {
console.table(data);
});
</script>
</body>
</html>
Check your browser console to view the result.
I am new to AJAX and am experimenting with a simple page that should show a txt file into a specific location. At this point it does not show the vlist.txt file.
Question: Why does this code not display the file (vlist.txt)?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("C:\Users\itpr13266\Desktop\vlist.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2>This is where your text will go</div>
<button>Get External Content</button>
</body>
</html>
New Code that was Tried.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load(function() {alert( "Load was performed." ););
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2>This is where your text will go</div>
<button>Get External Content</button>
</body>
</html>
No alert box was displayed so I am not sure that it is even getting to that point.
$().load() can't be used with a local file path like C:\Users\itpr13266\Desktop\vlist.txt.
Put your file on a web server and your code will most likely work.
I have a simple page which uses the mediaelement.js audioplayer plugin. The player attaches and functions correctly when loaded normally. However, when the page is loaded via ajax, the mediaelementplayer does not attach to the audio tag.
I use this code to call the file via ajax and jquery:
<html>
<head>
<link href="/test-vocabulary.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ajax_vocab_link").click(function(evento){
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", {chrisSearch: searchTerm}
);
});
})
</script>
</head>
<body>
<p><button class='ajax_vocab_link' id='ajaxlink_1' title='clothes'>Link to load ajax doc</button></p>
<div class='ajax_vocab_container' id='ajaxcontainer_1'>This is div id ajaxcontainer_1</div>
</body>
</html>
The audioplayer page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- Audio Player CSS & Scripts -->
<script src="http://www.ingles23.com/audioplayer/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://www.ingles23.com/audioplayer/css/style4.css" media="screen">
<!-- end Audio Player CSS & Scripts -->
<script>
$(document).ready(function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
</head>
<body>
<div class='display_vocab_container' >
<div class='display_vocab_text' >
<div class='audio-player-slim'>
<audio controls='controls' type='audio/mp3' src='/sound/mp3/i23-crear-frases-ingles-5.mp3' id='audio-player-vocab0'></audio>
</div>
</div>
</div>
</body>
</html>
I've tried many combinations including using on, live, success and moving the css/js links between the documents, but these have all made the situation worse.
What can i do get the file to attach medaielementplayer when loaded via ajax?
Try to put the mediaelementplayer() function call in the ajax success function, that worked for me. So unless you want to use .ajax instead of .load you'll need to pass it as the second argument to the load function. Or use http://api.jquery.com/ajaxSuccess/
$(".ajax_vocab_link").click(function(evento) {
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
});
I have the following code:
<html>
<head>
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script>
<script>
FB.Event.subscribe('edge.create',
function(response) {
alert('TEST');
}
);
</script>
</head>
<body>
<div id='fb-root'></div>
<fb:like send="true" width="450" show_faces="true" />
</body>
</html>
When I click on like, the alert is not showing up. I have tried the same code before and it seemed to work. Do you see something wrong? I don't see any errors in JS console...I am in localhost.
EDIT:
Here you can see it live: http://jsfiddle.net/jCE5K/
Per http://developers.facebook.com/docs/reference/plugins/like/, you need to have a fb-root DIV tag.