I'm trying to create a video player with controls for Android TV with Flutter
The basic video_player is working:
https://gist.github.com/andraskende/195e746716e5e4e978356abb09e66a37
Would like to enhance the controls:
video plays: show controls for first 5 seconds, then hide controls..
keypress on D-pad controls would appear (play/pause, forward rewind)
video paused: show controls, if back pressed once hide controls
I tried to add RawKeyboardListener to listen on a keypress on remote but then the controls are not selectable as the RawKeyboardListener takes over..
I guess when the controls are hidden I need RawKeyboardListener to bring up the controls and disable the RawKeyboardListener so the control buttons can be selected.
Any help is greatly appreciated.
Thanks,
Andras
I faced similar kind of issue where I fixed it with below code:
void _onKey(RawKeyEvent e) {
controls();
if (e.runtimeType.toString() == 'RawKeyDownEvent') {
switch (e.logicalKey.debugName) {
case 'Media Play Pause':
case 'Select':
setState(() {
if (_videoViewController.value.isPlaying) {
_videoViewController.pause();
} else {
_videoViewController.play();
}
});
break;
}
}`
Now if you wanted to have a fast forward or back just use the RawKeyboardListener with
specific case to handle it.
You can also use your D-PAD keys to perform such action.
Related
I am using Flicker video player to play videos from network in flutter web. When I disable the controls and hide them, it's still working with keyboard shortcuts like m for mute unmute, left right keys for forward and backward. I want to disable these keyboard shortcuts as well. Anybody did this or know about this ? Thanks
Flick Video Player dependency documentation says;
You can pass webKeyDownHandler argument to FlickVideoPlayer and manage the keyboard shortcuts yourself.
Maybe with this parameter you can pass null values to shortcuts and disable them. Check it out.
Tried this code and it works. Thanks to #Slender suggestion.
FlickVideoPlayer(
flickManager: flickManager,
webKeyDownHandler: (event, manager) {
return null;
},
)
I have a Cordova Mobile application which uses iScroll plugin. To my surprise scroll doesn't work when I run the app in VoiceOver mode (three finger swipe up/down gesture). It just reads page 1 of 1 even if the content is existing for more than 2 pages.
Are there any role attributes to make page to scroll ? Please help.
I found that iScroll is using transform CSS property for scrolling.
I was able to resolve this issue.
May be you can also try the same.
Add below style to your parent div
-webkit-overflow-scrolling : touch
There is a phone gap plugin to listen for VoiceOver on/off https://github.com/phonegap/phonegap-mobile-accessibility
// Define a persistent callback method to handle the event
function onScreenReaderStatusChanged(info) {
if (info && typeof info.isScreenReaderRunning !== "undefined") {
if (info.isScreenReaderRunning) {
console.log("Screen reader: ON");
// Do something to improve the behavior of the application while a screen reader is active.
} else {
console.log("Screen reader: OFF");
}
}
}
// Register the callback method to handle the event
window.addEventListener(MobileAccessibilityNotifications.SCREEN_READER_STATUS_CHANGED, onScreenReaderStatusChanged, false);
On voiceover ON event you can destroy iScroll(or make useTransform property to false).
On voiceover OFF you can re-initiate the iScroll.
Let me know if it works.
can anyone please explain to me why the html SELECT control (or any other control like BUTTON) placed inside the div (that is registered with dojox/gesture/swipe events) cannot be opened? I'd welcome any workarounds pls
require({
}, [ 'dojo/dom', 'dojox/gesture/swipe', 'dojo/on', 'dojo/_base/event' ], function(dom, swipe, on, event) {
var div = dom.byId('testSwipe');
var isSwipe = false;
on(div, swipe.end, function(e) {
console.log("### SWIPE");
});
});
http://jsfiddle.net/zLyck884/
based on the documentation here, particularly the image : http://dojotoolkit.org/reference-guide/1.10/dojox/gesture.html
the image depicts how the dojo standardizes the events (also for desktops) and how the swipe is just another layer of the touch events. so I reckoned if the mouse events are replaced by touchstart or something, then it most likely blocks the default mouse action...
once I've stopped propagating the event (on the SELECT) further, then it worked ok.
query("select", this.domNode).on(touch.press, function(e){e.stopPropagation()});
where this.domNode is the element on which the swipe is enabled
on(this.domNode, swipe, lang.hitch(this, "_onSwipe"));
Unfortunately the swipe (touch) event overriding the default behaviour is not very handy, I just left dojox/gesture/swipe or touch for now. Seems like I'll rather implement my own touch event handling.
I am new to createJS toolkit (Flash CS6), My concept is I have a multiple buttons on the stage, each button click will have different animations in different frames.
my code is
'/* js
this.stop();
this.btnname.onPress = function()
{ this.parent.gotoAndPlay("cone"); }
*/'
it is perfectly working in all browsers and android mobile, but in iPhone it is not working,
I am trying to click on the button but canvas is highlighting in iphone,
when I change my code to the following code,
'/* js
this.stop();
this.onPress = function()
{ this.gotoAndPlay("cone"); }
*/'
It is working in iPhone, but I have multiple button clicks, here is my major problem.
Please help me find a solution to this issue.
Use addEventListener and listen for the "click" or "mousedown" event instead of assigning an onPress function. Like this:
/* js
this.stop();
this.btnname.addEventListener("click", function(){
this.parent.gotoAndPlay("cone");
});
*/
You need to create a shape, cache it and use it as the hitArea of your button. john has answered your question here: http://community.createjs.com/discussions/easeljs/5663-touch-on-ios-only-seems-to-work-with-bitmaps
I've got a web page for the iPhone that uses the HTML5 video tags. On the iPhone, such embedded videos are played in the native player. I wanted to check when the video had ended and when the user had dismissed the video with the "Done" button. Initially, I tried this:
var video = $("#someVideo").get(0);
video.addEventListener('ended', myFunction);
But that only fired when the video was allowed to finish. After some playing around with other events (suspend, stalled, waiting) I found that the "Done" button triggers a 'pause' event. However, when I add this:
video.addEventListener('pause', myFunction);
my code is called both from the "Done" button and when the user taps the pause button in the playback controls. The second case is undesirable; I only want the first case, but the events don't seem to be giving me enough information.
Does anyone know of a way to tell when the user has hit the "Done" button in the iPhone player (versus simply pausing)?
Just check the webkitDisplayingFullscreen boolean in your pause function. Pressing Done or Pause triggers the pause event, but Done does a wee bit extra like an exit from full screen mode. Doing that check will help you differenciate the 2 button presses.
Some sample code below.
<script>
var html5Video = function() {
return {
init: function() {
var video = document.getElementsByTagName('video')[0];
video.addEventListener('ended', endVideo, false);
video.addEventListener('pause', pauseVideo, false);
}
};
}();
function endVideo() {
alert("video ended");
}
function pauseVideo() {
var video = document.getElementsByTagName('video')[0];
if (!video.webkitDisplayingFullscreen)
endVideo();
}
html5Video.init();
</script>
This is what you need:
yourplayer.addEventListener('webkitendfullscreen', onPlayerExitFullscreen, false);
And vice versa
yourplayer.addEventListener('webkitbeginfullscreen', onPlayerEnterFullscreen, false);
Here's another answer to your question that I found: How to figure out when a HTML5 video player enters the full screen mode on iOS / iPads?
There is an event called "ended" that you should probably use, see http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#event-media-ended .