I am trying to debug a case where all sprites that have the hand cursor turned on do not actually display them properly.
When you hover, the cursor does not change
When you click down, the hand cursor still fires.
Down events still fire but I think over/out events are not firing
There are no errors/warnings for the game in the console.
Same thing happens in a few browsers
Since this project is a derivative of another project where the cursor works, I'm trying to slowly step back my code but not really having luck so far with that. So trying to drum up ideas on how to figure this out.
Edit
Since this happened again, on another project I thought I would post up code. I boiled this down to a very simple game and it still happens. This is with Phaser 2.4.8 and Pixi v2.2.9.
<!DOCTYPE HTML>
<html>
<head>
<title>Example</title>
<style>
body {
margin: 0;
padding: 0;
background: #000;
}
canvas {
margin: 0 auto;
}
</style>
<script src="./assets/js/phaser.min.js"></script>
<script>
var game = new Phaser.Game(2280, 1440, Phaser.CANVAS, '', {
preload: function() {
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.load.spritesheet('help', 'assets/img/help-button.png', 130, 130);
},
create: function() {
var help = game.add.sprite(0, 0, 'help', 0);
help.inputEnabled = true;
help.input.useHandCursor = true;
}
});
function resizeGame() {
this.scale.refresh();
}
window.onresize = resizeGame.bind(game);
</script>
</head>
<body>
<div id="game"></div>
<audio id="audio" controls style="display:none">
Your browser does not support the audio element.
</audio>
</body>
</html>
Related
I am designing an experiment making people watch a youtube video and I would like to keep them from controlling or stopping the video.
Also, it seems I can't use css since I am using a basic experiment software called Qualtrics.
I tried iframe "controls" and "disablekb" options but they didn't work. Also, "hideControls" doesn't work.
In the html (Qualtrics), I added
this simple html code and then I typed most codes in javascript:
var videoId = 'vpTHi7O66pI';
var hideControls = true;
// This code loads the IFrame Player API code asynchronously
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
if (hideControls) {
hideControls = 0;
} else {
hideControls = 1;
}
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: videoId,
events: {
'onReady': onPlayerReady,
},
playerVars: {
autoplay: 1,
modestbranding: 1,
rel: 0,
disablekb: 1,
enablejsapi: 1,
showinfo: 0,
controls: 0
}
});
}
function onPlayerReady(event) {
player.contextmenu(function() {
return false;
});
player.setPlaybackRate(1.25);
player.loadVideoById({'videoId': videoId,
'suggestedQuality': 'large'});
event.target.playVideo();
}
window.setTimeout(function() {
onYouTubeIframeAPIReady();
}, 1000);
I expect mouse clicking doesn't lead to pausing the video but it pauses.
Try adding the pointer-events: none; CSS property in an inline style element on the player's encapsulating element.
For example, in your HTML you can use:
<style>#player {pointer-events: none}</style>
You could add a transparent overlay over the player itself, like a div, then stop the click event when it happens in there (could be with CSS, setting it's pointer events as pointer-events: none).
I have the most awesome answer if you're flexible about a JS solution - CSS can actually do this:
#container_id {
pointer-events: none;
}
Now the mouse won't interact with the controls at all (hover or click)
Edit: If JS is a requirement:
document.getElementById('container_id').addEventListener('click', function(event){
event.preventDefault()
}
Final edit: Sorry, did not read as carefully as I should :(
Looks like you are loading the player markup into var player - you should be able to add the prevent default onclick directly to that var as such:
player.onclick = function(event){ event.preventDefault() }
Good luck!
In response:
Each approach mentioned above was a different option, the middle one supposes access to the DOM, but I'm starting to sense you can't directly manipulate it based on what you've said - so I recommend the last implementation, I would try either of these:
Under:
player.setPlaybackRate(1.25);
player.loadVideoById({'videoId': videoId,
'suggestedQuality': 'large'});
Add:
player.onclick = function(event){ event.preventDefault() }
Or:
event.target.onclick = function(event){ event.preventDefault() }
I like the first one better for readability, but they might both work, without more info about the [ YT.Player ] (I assume a library you're using) I can't be sure the object bound to [ var player ] will allow it's onclick to be modified (some libraries include measures to prevent things like that) - so I include option 2 as a fallback - let me know if that doesn't work because there are other event binding options...
The CSS approach at the top is your last ditch effort, it would solve the problem on it's own, no need for any of the JS. It would be added between the
<style> and </style>
tags in the documents head, like so:
<head>
[ STUFF ]
<style>
#[THE_ID_OF_YOUR_CONTAINER] {
pointer-events: none;
}
</style>
</head>
or included in a stylesheet - likely named [something].css on your server as just:
iframe {
pointer-events: none;
}
I know this is an old thread, but recently ran into the same problem. I am trying to show a video as part of an experiment on memory. The plan is to record button presses, so it would be tricky with the timing if viewers can pause the video.
The video is hosted here: https://muse.ai/docs#embed-player,
which should in theory allow me to implement the solutions above. However, the movie is still pausable on a mouse-click.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<style>
#container-name{
pointer-events: none;
}
</style>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
</script>
</head>
<body style="width: 840px; background-color: grey;">
<div id="container-name" ></div>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
const player = MusePlayer({
container: '#container-name',
video: 'zT4Vmcc',
width: 800,
autoplay: true,
style: 'no-controls',
});
event.target.onclick = function(event){ event.preventDefault() }
</script>
</body>
</html>
As you can see I tried to implement two of the solutions above. Any input would be apprechiated.
I was able to solve this with this:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="user-scalable=no">
<style>
</style>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
</script>
</head>
<body style="width: 840px; background-color: grey;">
<div id="container-name" ></div>
<script src="https://muse.ai/static/js/embed-player.min.js"></script>
<script>
const player = MusePlayer({
container: '#container-name',
video: 'zT4Vmcc',
style: 'no-controls',
logo: false,
search: false,
title: false,
autoplay: true,
shortcuts: false,
css: '*{pointer-events:none!important;}',
});
</script>
</body>
</html>
Which is also what juandxce suggested, thanks!
I have researched and experimented my brains out on this one. I have built a working application that uses the HTML5 canvas to play videos and interact with users through a web page (a game, sort of). Works like a charm, but I want to add captions to the video to make it more accessible. I don't even seem to be able to get the WebVTT file to load and I've reached the stage of voodoo programming by trying examples from the web and am making no progress. I have tried to distill the application down to its bare minimum here in hopes someone can provide some insight into what I'm doing wrong.
The video plays when I click on the canvas, the "...waiting for cuechange event..." message stays up while it plays, and then it goes to the "video complete ... reload to try again" message when done (kept it simple by requiring a page reload to try the test again), so the basic mechanics seem to be working. It never gets into the "load" function for the text track (never displays "... loaded text track ..."), and the updateSubtitle() function is never invoked. If I insert a trackElement.readyStatus() call, it always returns 0 (unsurprisingly). As a further note, if I add a testStatus.innerHTML = "...loaded metadata..."; statement in the "loadedmetadata" listener, it does get there.
var canvasContext, videoElement, intervalHandle, testStatus, trackElement;
function processFrame() {
canvasContext.drawImage(videoElement, 193, 50, 256, 194);
}
function videoEnded() {
clearInterval(intervalHandle);
testStatus.innerHTML = "video complete ... reload to try again";
}
var count = 0;
function updateSubtitle(event) {
count = count + 1;
testStatus.innerHTML = "count" + count;
}
function clickHandler(event) {
testStatus.innerHTML = "...waiting for cuechange event...";
videoElement.setAttribute("src", "start.ogg");
videoElement.load();
intervalHandle = setInterval(processFrame, 25);
videoElement.play();
}
function init() {
var canvasElement, textTrack;
canvasElement = document.createElement("canvas");
videoElement = document.createElement("video");
videoElement.addEventListener("loadedmetadata", function() {
trackElement = document.createElement("track");
trackElement.kind = "captions";
trackElement.label = "English";
trackElement.srclang = "en";
trackElement.src = "start_en.vtt";
trackElement.addEventListener("load", function() {
testStatus.innerHTML = "... loaded text track ...";
trackElement.mode = "showing";
});
videoElement.appendChild(trackElement);
trackElement.addEventListener("cuechange", updateSubtitle, false);
});
var mainDiv = document.getElementById("arghMainDiv");
canvasElement.setAttribute("id", "mediaScreen");
canvasElement.width = 640;
canvasElement.height = 480;
var firstChild;
if(mainDiv.hasChildNodes()) {
firstChild = mainDiv.firstChild;
mainDiv.insertBefore(canvasElement, firstChild);
} else {
firstChild = mainDiv.appendChild(canvasElement);
}
testStatus = document.createElement("p");
testStatus.setAttribute("id", "testStatus");
mainDiv.insertBefore(testStatus, firstChild);
testStatus.innerHTML = "click on canvas to test";
canvasContext = canvasElement.getContext('2d');
canvasElement.addEventListener("click", clickHandler);
videoElement.addEventListener("ended", videoEnded);
}
#fatalError {
color: red;
}
#arghMainDiv {
text-align: center;
}
#mediaScreen {
border: 5px solid #303030;
margin-left: auto;
margin-right: auto;
display: block;
cursor: default;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Problems With TextTrack Object</title>
<link rel="stylesheet" type="text/css" href="subargh.css">
<script src="subargh.js"></script>
</head>
<body onload="init()">
<div id="arghMainDiv">
</div>
</body>
</html>
If you want the video and WebVTT files I'm using (just a few seconds long), they are here and here (respectively). I should also mention that if I play the video using VLC, that it recognizes and plays the .vtt file as subtitles properly on the video (so it appears to be well-formed). I am running my tests on Firefox 57.0.4 (64-bit) on a Windows 7 system if that makes any difference (but I am under the impression that Firefox is mostly fixed where Timed Text Tracks are concerned now).
In the trivial case of creating and then destroying an instance of Phaser.Game there appears to be a memory leak. Below is a complete working example: click the button to create an instance, click again to destroy it. Repeatedly clicking the button causes memory usage to grow without bound. Is there something I'm missing about the phaser lifecycle that I should be doing instead?
I'm posting this as a code snippet rather than a jsfiddle because you need to look a a memory profiler or something like that to see the problem and so jsfiddle just complicates the matter.
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>test</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.8.1/phaser.js">
</script>
</head>
<body>
<button id="button">Click</button>
<div id="canvas"></div>
<script>
window.onload = function() {
var d, n, game;
d = document.getElementById('button');
n = document.getElementById('canvas');
function preload() {
}
function create() {
}
function update() {
}
function handler() {
if(game) {
game.destroy();
game = null;
} else {
game = new Phaser.Game(800, 600, Phaser.AUTO, n, {
preload: preload,
create: create,
update: update
});
}
}
d.onclick = handler;
};
</script>
</body>
</html>
Answering (at least partially) my own question, the problem is in Phaser.CanvasPool. Whenever a new Phaser instance is created a new canvas is created and added to the pool. Destroying the instance dows not remove the canvas from the pool or mark it as available for re-use.
You can kinda-sorta hack this into working by doing something crude like setting Phaser.CanvasPool.pool = [] after calling game.destroy(), but that won't work if you have multiple phaser instances going.
If anyone knows what the correct workflow is supposed to be I'd love to know---Phaser.CanvasPool is one of phaser's points of contact with PIXI and all of those appear to be poorly documented.
EDIT: Found the source of the memory leak. It's Phaser.Utils.Debug.boot(), which adds a new canvas to the pool every time it's called, which by default is every time a phaser instance is created and booted.
The problem affects only WebGL-rendered canvases when enableDebug is enabled (which is the default).
For completeness, here's an edited version of the code above which disables debugging and therefore does not exhibit the memory leak:
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<title>test</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/phaser-ce/2.8.1/phaser.js"></script>
</head>
<body>
<button id="button">Click</button>
<div id="canvas"></div>
<script>
window.onload = function() {
var d, n, game;
d = document.getElementById('button');
n = document.getElementById('canvas');
function preload() {
}
function create() {
}
function update() {
}
function handler() {
if(game) {
game.destroy();
game = null;
} else {
game = new Phaser.Game({
width: 800,
height: 600,
renderer: Phaser.AUTO,
parent: n,
enableDebug: false,
state: {
preload: preload,
create: create,
update: update
},
});
}
}
d.onclick = handler;
};
</script>
</body>
</html>
We're trying to offer the ability to switch between different video bitrates using the resolution switcher plugin (https://github.com/kmoskwiak/videojs-resolution-switcher) for a video.js player.
Here is a demo page with basic setup to run videojs player in flash mode: jsbin (click on 'edit in jsbin on your top right to see the actual code)
The plugin works correct in HTML5 (DASH and HLS) streaming but fails in Flash mode. The player will start playing with default bitrate value ('1080p' in this case) without any issues. The problem occurs when you actually switch the bitrate. If you select to change to a different bit-rate the player will stop playing. No browser console errors, player will not crash, just freezing. Seems like the player even doesn't sent the actual http request to get the new video source. Sometimes plugin even can actually switch the source, but it's happened just few times and randomly. In other words the behavior is way unstable and not acceptable.
Plugin provides resolutionchange event which should be fired when resolution is changed, but it's not. Only UI changes are visible.
I'm really appreciate on any help or ideas on how this behavior can be fixed!
Also including it here:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="http://vjs.zencdn.net/5.16.0/video-js.css" rel="stylesheet">
<style>
.video-js { background-color: black; }
video { width: 100%; height: 100% }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/video.js/5.16.0/video.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-hls/5.1.0/videojs-contrib-hls.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dashjs/2.4.0/dash.all.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-contrib-dash/2.7.1/videojs-dash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/videojs-resolution-switcher/0.4.2/videojs-resolution-switcher.min.js"></script>
</head>
<body>
<video id="player" class="video-js vjs-default-skin" width="450" height="250"></video>
<script>
videojs('player', {
preload: 'auto',
autoplay: true,
techOrder: ["flash"],
controls: true,
plugins: {
videoJsResolutionSwitcher: {
default: 1080,
dynamicLabel: true
}
}
}, function(){
handleReady(this);
});
var sources=[
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/1080p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"HQ",type:"rtmp/mp4",res:1080},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/720p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Medium",type:"rtmp/mp4",res:720},
{src:"rtmp://stagingmedia.livecoding.tv/livecodingtv/480p_irwanbd?t=FDD4A16B14C34359A8677A339962B60D",label:"Low",type:"rtmp/mp4",res:480}
];
function handleReady(player) {
window.player = player;
player.updateSrc(sources);
}
</script>
</body>
</html>
var player = videojs('video', {
controls: true,
muted: true,
width: 800,
plugins: {
videoJsResolutionSwitcher: {
ui: true,
default: '< default_res >', // Default resolution [{Number}, 'low', 'high'],
dynamicLabel: false
}
}
},
function() {
player.updateSrc([ < sourcetags > ]);
player.on('resolutionchange', function(){
player.play();
console.info('Source changed to %s', player.src());
})
Note: I just vastly simplified the program and have left it with the bare essentials ...
So I am trying to add graphs within a sigma.js graph. First, let me post the javascript (sigmaAngualr.js) ...
app = angular.module('sigmaAngular', []);
app.controller('NetworkDataCtrl', function($scope){
var i, s;
$scope.newName = null;
$scope.s = null;
$scope.N = 3;
$scope.newNode = function (id, label){
return {id: id,
label: label,
x: Math.random(),
y: Math.random(),
size: Math.random()+0.2,
color:'#333'}
};
$scope.addNodeGraph = function(id, label){
$scope.s.graph.addNode($scope.newNode(id, label));
console.log(id+'-'+label);
};
$scope.tempNodes = [];
for( i=0; i<$scope.N; i++ )
$scope.tempNodes.push($scope.newNode('id'+i, 'Node'+i));
$scope.s = new sigma({graph:{nodes:$scope.tempNodes, edges:[]}})
});
app.directive('showGraph', function(){
// Create a link function
function linkFunction(scope, element, attrs){
scope.s.addRenderer({container: element[0]})
};
return {
scope: false,
link: linkFunction
}
});
And here is the HTML ...
<!DOCTYPE html>
<html>
<head>
<title>Using AngularJS</title>
<script type="text/javascript" src='lib/sigma/sigma.min.js'></script>
<script type="text/javascript" src='lib/angular/angular.min.js'></script>
<script type="text/javascript" src='lib/sigmaAngular.js'></script>
<link rel="stylesheet" type="text/css" href="main.css">
</head>
<body ng-app='sigmaAngular'>
<div>
<div ng-controller='NetworkDataCtrl'>
<input type='text' ng-model='newName' />
<button ng-click='addNodeGraph(newName,newName)'> Add Node </button>
<hr>
<div show-graph id='graph-container' s='s' tempNodes='tempNodes'>
</div>
<hr>
</div>
</div>
</body>
</html>
Of course, I am unable to add a node to the graph.
I had also tried another option of creating an entire graph when I add a node. That doesnt work either. (This is no longer true)
Let me try to explain. Now,
When I refresh the browser, I do not see a graph.
When I resize the browser window The graph suddenly appears.
When I type a random name and hit the Add Node button, the graph doesnt change.
When I resize the browser window, the graph changes to reveal the new node.
So in summary, I have to resize the browser window to see any changes in the graph.
Just a side note: The css is below:
#graph-container {
position: relative;
width: 200px;
height: 200px;
border: 1px solid indianred;
}
I feel now that I am really close to solving the problem. Just a tiny bit off somewhere ...
Any help will be greatly appreciated!!!