I'm using video.js to embed a video into an HTML page. It is to be used as a ipad-only web app so I believe that it's using the native HTML5 player. I'm trying to disable the click-to-play functionality (so that the user must use the controls) but I am having trouble doing so.
I've tried unbinding the click event (using jQuery) form the video/video player/poster and I've tried using addevent to add e.preventDefault() to the video but none of this seems to work.
Ps. I found a couple of posts saying you could comment out a line in the code, but this line doesn't exist in my version - maybe the plugin has been rewritten.
Check here
https://github.com/videojs/video.js/blob/master/docs/api/vjs.MediaTechController.md#removecontrolslisteners
So for example
v = videojs('scene04-video');
v.tech.removeControlsListeners();
You can try this. It helped me. Just add this to css file:
.video-js.vjs-playing .vjs-tech {
pointer-events: none;
}
It would be helpful to know which version you are using. This works for me on 4.1 (latest api)
// Disable big-play-button
videojs.Player.prototype.options_.children.bigPlayButton = false;
// Override click handler on media object;
videojs.MediaTechController.prototype.onClick = function() {};
// Initialize video
var vid = videojs("video", {});
// Show controls (since in my browser it doesn't think it needs to inititally)
vid.controlBar.show();
UPDATE: I should clarify that the above only works using the dev.js API (not the prod/minified version). In the minified version, the MediaTechController's onClick function name isn't preserved, you can't reliably override it. In this case, you can try manually disconnecting the the HTML5 and Flash click events:
videojs.Html5.off('click');
videojs.Flash.off('click');
var vid = videojs("video", {}, function() {
this.bigPlayButton.hide();
});
// Again - show the controlbar (optionally)
vid.controlBar.show();
Check this:
.vjs-tech {
pointer-events: none;
}
Related
Using v2.13 of the viewer, the ZoomWindow extension relies on having the default GUI enabled. Is there a way around this? The load method is:
proto.load = function() {
var viewer = this.viewer;
var toolbar = viewer.getToolbar(true);
//var toolbar = viewer.getToolbar ? viewer.getToolbar(true) : undefined;
// Init & Register tool
this.tool = new namespace.ZoomWindowTool(viewer);
viewer.toolController.registerTool(this.tool);
// Add the ui to the viewer.
this.createUI(toolbar);
return true;
};
which fails because getToolbar is undefined.
It seems from the commented out line that this has been considered, but not implemented.
What is the best way to implement a work around - should I copy the entire extension with a new name, or can I replace the load method at runtime?
Edit: was looking to use the headless viewer, but it seems easiest just to hide the UI with css.
It's not clear to me if you are using the GuiViewer3D or want to use the Viewer3D, the viewer without Autodesk custom UI. If you use GuiViewer3D, you can simply wait for the toolbar to be loaded before loading the ZoomWindow extension, which requires the toolbar controls to be created in order to add a button to it.
viewer.addEventListener(Autodesk.Viewing.TOOLBAR_CREATED_EVENT, function () {
viewer.loadExtension('Autodesk.Viewing.ZoomWindow')
})
Here is a blogpost I wrote a while ago about using events in the viewer. It is not up-to-date with the current version but remains valid:
http://adndevblog.typepad.com/cloud_and_mobile/2015/10/event-watcher-extension-for-view-data.html
Now as Zhong mentioned, if you want to use the headless viewer with no UI and still use the extension, you may have to copy and customize it as you suggested. But an easier workaround could be to use GuiViewer3D and simply hide the existing toolbar with css, so the the js code remains valid. Set display:none on div id="guiviewer3d-toolbar", for example, or on the adsk-control class.
Hope that helps
How (or is it even possible) to use custom HTML dialogs in Electron? I know that Electron provides certain dialogs (showMessageDialog, showErrorDialog) but these do not seem to allow custom HTML.
I do not wish to use native HTML dialogs (dialog) tag as it does not 'blend in' with the user interface.
Any help would be much appreciated. Thanks!
You can create a BrowserWindow that's modal and, if you like, frameless. See http://electron.atom.io/docs/api/browser-window/.
Yes.
On your parent you should have:
const { remote } = require('electron');
const { BrowserWindow } = require('electron').remote;
and then:
let child = new BrowserWindow({
parent: remote.getCurrentWindow(),
modal: true,
width:300, height:300,
webPreferences: {
enableRemoteModule: true,
nodeIntegration: true
}
});
child.loadFile('myCustomModal.html');
On myCustomModal.html remeber to include a way to close the modal!
like:
<button id="cancel-btn">Cancel</button>
<script>
const remote = require('electron').remote;
document.getElementById("cancel-btn").addEventListener("click", function (e) {
var window = remote.getCurrentWindow();
window.close();
});
</script>
As Marc Rochkind said in a previous answer, you can use modal windows in Electron.
However, I have found a small bug with modal windows which causes the parent window to flicker for a very short duration when its .show() function is called. After quite some time on Google, I found an open issue on GitHub about the same problem. After reading the comment section in the issue, and stumbling across some code snippets, I shared a hacky solution in the issue's comment section.
It does take some work to set up, but once it's done, it's really easy to port to other child windows.
Is it possible to swap the camera in during a video call on mobile?
I can get the available cameras using MediaStreamTrack.getSources().
But I'm able to swap them mid-call.
Any ideas on how to swap during a video call using html and javascript (I'm developing a hybrid app).
Also: is it possible to make Safari (iOS) compatible for webRTC without any plugin?
Any ideas on how to swap during a video call using html and javascript.
Something like this should work in Chrome*:
function switchCamera() {
// get new stream (different camera)
getUserMedia(constraints, function(newStream){
var oldStream = peerConnection.getLocalStreams()[0];
// toggle streams
peerConnection.removeStream(oldStream);
peerConnection.addStream(newStream);
// re-negotiate
peerConnection.createOffer(function (offer) {
peerConnection.setLocalDescription(offer);
// sendOfferToPeers(offer);
});
}, function(e) {
console.log(e);
})
}
function gotOffer(offer) {
peerConnection.setRemoteDescription(offer);
peerConnection.createAnswer(function(answer) {
peerConnection.setLocalDescription(answer);
// sendAnswerToPeers(answer);
});
}
function gotAnswer(answer) {
peerConnection.setRemoteDescription(answer);
}
*you mentioned something about being on mobile so the way you obtain the stream might be different. Also I didn't test this code and the API looks different, have a look here for the correct function calls createAnswer etc.. But the gist of it should be the same:
Acquire new stream
Update peerConnection
Inform peers (re-negotiate)
Also: is it possible to make Safari (iOS) compatible for webRTC without any plugin?
No. You can have a look here for updates.
I would like to know how to speed up a youtube video 2x without the user clicking on the HTML5 (of the video), but instead by modifying the URL.
For example, I know how to watch video starting at a specific time by appending to the URL the parameter &t=1m1s (for 1 minute and one second). Is it possible to use a similar method to speed up the video 2x?
What parameters should I add to the URL to watch video in double speed (I'm using html5)?
There's no way to change playback speed by URL arguments.
Anyway, if you're working with HTML, you can take advantage of the YouTube Player iFrame API.
Here's how to configure your player with all the JavaScript:
https://developers.google.com/youtube/iframe_api_reference#Getting_Started
And here's the function you're looking for to set playback speed:
https://developers.google.com/youtube/iframe_api_reference#Playback_rate
So you can edit your onPlayerReady function like this:
function onPlayerReady(event) {
player.setPlaybackRate(2); // This is what you're looking for
event.target.playVideo();
}
You can of course pass on step 5 of the documentation as this will stop your video from playing after six seconds.
If you have trouble setting that up, I'll edit a JSFiddle later (couldn't do it at work as my Flash plugin won't launch).
Update :
Here's the JSFiddle working fine with this code exactly:
http://jsfiddle.net/jpreynat/e11oy0eu/
I was trying to do this exact same thing earlier this week.
A solution purely from a URL parameter isn't possible. (or if it is,
it's not documentation here:
https://developers.google.com/youtube/player_parameters)
I came accros this JSFiddle by Johan Preynat: http://jsfiddle.net/jpreynat/e11oy0eu/
Worked for me, so hopefully it'll be useful for you too
HTML
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div id="player"></div>
JavaScript
// 2. 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);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '390',
width: '640',
videoId: 'M7lc1UVf-VE',
events: {
'onReady': onPlayerReady
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
player.setPlaybackRate(2);
event.target.playVideo();
}
See also the YouTube documentation on this:
https://developers.google.com/youtube/iframe_api_reference
Can you inject a shift > or < from users input via url or easier javascript? Maybe its easier to force the hot key press from the users end.
How can I get a callback when the audio tag is ready to play. (to tell the user, when implementing my own controls)
Using Chrome.
Have only done this on the video element but it should work for audio.
Firstly, you can't bind the event, I don't know why that doesn't work. So you have to use setTimeout.
Example using jQuery:
$(function(){
var audioReady = function(){
if (youraudioelement.attr('readyState')) {
alert("it's ready!");
} else {
setTimeout(audioReady, 250);
}
}
audioReady();
}
More info: http://www.w3.org/TR/html5/video.html#the-ready-states
Can you not bind to the onloadeddata event? It works for me. W3C Reference
Have you looked at the canplaythrough event?