Very odd one this one. I have a Vimeo Video and have set multiple cuepoints to trigger various events.
This was working fine up until this morning.
Example HTML:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cue point Issue</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div class="videoContainer">
<img class="aspectRationImg" src="img/asp-img.png" />
<iframe class="custVimVideo" src="https://player.vimeo.com/video/33110953?title=0&byline=0&portrait=0" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>
<script src="js/interactive_video_events.js"></script>
</body>
</html>
The Accompanying JavaScript:
var iframe = document.querySelector('iframe');
var player = new Vimeo.Player(iframe);
player.addCuePoint(5, {
customKey: 'doSomething'
}).then(function(id) {
}).catch(function(error) {
switch (error.name) {
case 'UnsupportedError':
break;
case 'RangeError':
break;
default:
break;
}
});
player.on('cuepoint', function(data) {
switch (data.data.customKey) {
case 'doSomething':
console.log("Cue Called");
break;
default:
break;
}
});
Once the video reaches 5 seconds, the following error is produced (Google Chrome):
player.js:2 Uncaught TypeError: Time must be a number.
at new r (player.js:2)
at Function.value (player.js:2)
at player.js:2
at Array.forEach (<anonymous>)
at TextTrack.<anonymous> (player.js:2)
at TextTrack.e (player.js:2)
r # player.js:2
value # player.js:2
(anonymous) # player.js:2
(anonymous) # player.js:2
e # player.js:2
Any help would be much appreciated!
There was a bug in our most recent release that cause this issue. It was reported within our API repo (https://github.com/vimeo/player.js/issues/318) and has since been addressed. This should no longer be an issue!
Related
I just started to learn using Vue. I wrote really simple code like the following.
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script src="https://unpkg.com/vue"></script>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
</div>
</body>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number:0
}
})
</script>
</html>
However, there is no number value.
But, when I open that code just by Ctrl+O on chrome, it shows succefully!
I definitely checked network by chrome dev tool and I got successfully vue.js from https://unpkg.com/vue#2.5.22/dist/vue.js What's wrong with it?
Loading the framework in the head is a good way to start.
See the example below, it works fine in here.
<!DOCTYPE HTML>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
</head>
<body>
<div id="app">
<h2>{{number}}</h2>
<h2>Here it is!</h2>
<button #click="clk">click</button>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: {
number: 0
},
methods: {
clk(){
this.number++;
}
}
})
</script>
</body>
</html>
I thought you should return an object from a function for data.
data : function() {
return {
number : 0
};
}
I make a simple application Ionic 2 but I find a problem that exists year screenshot
code index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- script home.js -->
<script src="js/home.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
</head>
<body ng-app="myApp">
<ion-pane>
<!-- <ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
</ion-content> --><div ng-view></div>
</ion-pane>
</body>
</html>
code home.html
<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS & Firebase Web App</title>
<link rel="icon" href="http://getbootstrap.com/favicon.ico">
<link href="http://getbootstrap.com/dist/css/bootstrap.min.css" rel="stylesheet">
<link href="http://getbootstrap.com/examples/signin/signin.css" rel="stylesheet">
<link href="justified-nav.css" rel="stylesheet">
<!-- un-comment this code to enable service worker
<script>
if ('serviceWorker' in navigator) {
navigator.serviceWorker.register('service-worker.js')
.then(() => console.log('service worker installed'))
.catch(err => console.log('Error', err));
}
</script>-->
<link href="../lib/ionic/css/ionic.css" rel="stylesheet">
<script src="lib/ionic/js/angular-ui/angular-ui-router.js"></script>
<link href="../css/style.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
<!-- ionic/angularjs js -->
<script src="../lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="../js/app.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron" style="padding-bottom:0px;">
<h2>AngularJS & Firebase App!</h2>
</div>
<form class="form-signin" role="form">
<input type="email" class="form-control" placeholder="Email address" required="" autofocus="">
<input type="password" class="form-control" placeholder="Password" required="">
<label class="checkbox">
Sign Up
</label>
<button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
</form>
</div>
</body></html>
code home.js
var app = angular.module('home', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
app.config(['$routeProvider', function($routeProvider) {
$routeProvider
.when('/home', { templateUrl : 'templates/home.html',controller: 'HomeCtrl' });
}])
app.controller('HomeCtrl', [function() {
}]);
code app.js
angular.module('myApp', ['ionic','home'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if(window.cordova && window.cordova.plugins.Keyboard) {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
// Don't remove this line unless you know what you are doing. It stops the viewport
// from snapping when text inputs are focused. Ionic handles this internally for
// a much nicer keyboard experience.
cordova.plugins.Keyboard.disableScroll(true);
}
if(window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(['$routeProvider', function($routeProvider) {
$routeProvider
.otherwise({ redirectTo: '/home' });
}]);
I added ngRoute in js files but same problem
I'm trying to set a cookie in my local machine using the jquery.cookie plugin. I already downloaded the jquery files that are needed and create a html file with this code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery-1.11.2.min.js "></script>
<script type="text/javascript" src="jquery.cookie.js "></script>
</head>
<body>
<script>
$(document).ready(function(){
$.cookie('name','value');
});
</script>
</body>
</html>
But the cookie it's not set in Google Chrome. What is wrong? Thanks.
I figured out how to do this: First the html file have to be open in the server. I already have apache configured so I open the file with the localhost. Then the code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="../javaframeworks/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="../javaframeworks/jquery-cookie/src/jquery.cookie.js"></script>
<link rel="stylesheet" type="text/css" href="../css/shadowbox.css" />
<script type="text/javascript">
if ($.cookie('backdrop')==null){
$(document).ready(function(){
$('.backdrop, .box').animate({'opacity':' 0.85'}, 250, "linear");
$('.box').animate({'opacity':' 1.00'}, 250, "linear");
$('.backdrop , .box').css('display', 'block');
$('.close').click(function(){
close_box();
});
$('.backdrop').click( function(){
close_box();
});
});
$.cookie('backdrop','1');
}
function close_box(){
$('backdrop, .box').animate({'opacity':'0'},250, 'linear',function(){
$('.backdrop , .box').css('display', 'none');
});
}
</script>
</head>
<body>
<div class="backdrop"></div>
<div class="box">
<div class="close"><img src="../img/big_close.png"></div>
<div class="contentbox">
<img src="../img/warning.jpg" id="aviso">
<h4 id="msg"> Está página está em fase de desenvolvimento</h4>
</div>
</div>
</body>
</html>
The goal of this code is to show a div with a message in front of the page content and put an opact background. But only the first time the user open the page.
Can the following href="#" be called automatically?
<a id="loadBtn" href="#">Do stuff</a></p>
Thanks!
(Update) In the following facebook gallery launcher:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<script type="text/javascript">
$(document).ready(function () {
$('#loadBtn').click(function () {
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
return false;
});
});
</script>
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<p><a id="loadBtn" href="#">Get photo</a></p>
<div id="albumsContainer"></div>
</body>
</html>
Essentially to get to the action faster rather than having msc bits of text to click first.
you can set href attribute with whatever value you want as per below code:
$('#loadBtn').attr('href','#');
Not sure whether the href='#' is just for example purposes or what you're putting in your final code.
(1) If you want to scroll to the top of the page, you can either use $('body').scrollTop(0) or animate it a bit with something like $('html, body').animate( {scrollTop : 0 }, 200); (If you want to animate it, just attach it to #loadBtn's click event and be sure to return false, so the anchor won't jump to the top and override your animation.)
If you want, you can also set window.location.hash so the hash location will be recorded.
(2) If you want to simulate a click on the link, you can use .trigger(), e.g.: $('#loadBtn').trigger('click');
I think following code will work for you:
$("#loadBtn").ready(function(){
$(this).click();
});
Also try this in your onload function:
document.getElementById('yourLinkID').click();
// Automatically href will be called
Thanks for your pointers. It lead me to the idea of just rearranging the javascript so that the code was executed without need to click anything:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.getfacebookalbums.js"></script>
<link rel="stylesheet" href="css/jquery.getfacebookalbums.css" type="text/css">
<style type="text/css">
html, body {
font-family: Arial, _sans;
font-size: 0.8em;
}
</style>
</head>
<body>
<!--p><a id="loadBtn" href="#">Get photo</a></p-->
<div id="albumsContainer"></div>
<script type="text/javascript">
$('#albumsContainer').getFacebookAlbums({
appId : 'ID',
onImageSelected : function (data) {
alert("Your facebook image is located at " + data);
window.location.href = "assignFacebookPhoto.php?fbPhoto=" + data;
}
})
</script>
</body>
</html>
I am trying to use aehlke/tag-it and its autocomplete option. The autocomplete shows up but in an odd position.
Here is my code:
<!doctype html>
<html lang='en'>
<head>
<meta charset='utf-8'/>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1/themes/flick/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link href="tag-it/css/jquery.tagit.css" rel="stylesheet" type="text/css">
<link rel='stylesheet' type='text/css' href='bootstrap/css/bootstrap.css'>
<link rel='stylesheet' type='text/css' href='style.css'>
</head>
<body>
<div class='container'>
<h2> Tagging Functions </h2>
<div class='row'>
<div class='span5'>
<ul id="myTags">
<!-- Existing list items will be pre-added to the tags -->
</ul>
</div>
</div>
</div>
<!-- Scripts -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.12/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script src="tag-it/js/tag-it.js" type="text/javascript" charset="utf-8"></script>
<script scr='bootstrap/js/bootstrap.js'></script>
<script src='js/main.js'></script>
</body>
</html>
AND JS:
// Main JS
$(document).ready(function() {
$("#myTags").tagit({
availableTags:['me', 'you']
});
});
It's because tag-it use curCSS wich was remove from jQuery on 1.8 so if you use any jQuery version higger than that... is not going to work.
A workaround could be to load jQuery 1.7.x and use jQuery.noConflict
This is my solution
//Save current jQuery
current_jquery = $.noConflict(true);
//Load the jQuery 1.7.3
current_jquery('<script>').appendTo($('head')).attr({
type: 'text/javascript',
id : 'jquery_173',
src : '//ajax.googleapis.com/ajax/libs/jquery/1.7.3/jquery.min.js'
});
//Keep jQuery 1.7.3 in a var to use it later
jquery_tagit = $.noConflict(true);
//Revert the jQuery that you where using to its original var $
$ = jQuery_actual;
//Load tag-it with jQuery 1.7.3
jquery_tagit.tagit({...});