Android Ionic video switch to fullscreen flicker - javascript

I am using Ionic on android devices, and there is a tag in the HTML page. When I pushed the fullscreen button to make the video presented in fullscreen mode, there is a obvious flicker in the area of the tag on the device.
During the flicker, I can see the wallpaper of the android phone and the icons of the apps on this device. Is this some issue with the native functions? And I also notice that when the keyboard hide/show a similar problem.
As you can see in the picture, when I am switching to the fullscreen, there is clearly a play button of the native player, after a second or so, the video will be playing.
here are some codes.
<div ng-click="play()" ng-show="showPlay" class="tutorial-play-button"><img src="images/welcomeNote/play.png"></img></div>
<video id='video-widget' autoplay='true' autobuffer controls playsinline poster="null" style="width:100%;">
<source src="{{src}}">
</video>
</div>

This issue is not because of your mentioned code in the post. It might be because you have not handled your out activity action/animation correctly. Same thing will happen even when you launch another activity. There might be snippet of code in your project that is altering default behaviour of activity. You should google Activity Transition and you might have your solution.
I hope this helps.

The cause is the Theme I use. I used a transparent theme in my app. I changed the theme to Theme.Light. It is OK.

Related

Hide play button when video is not autoplaying

On my website there is a video which should autoplay. It does that on most devices, apart from, of course, iPhones. I'm using the WordPress cover widget (and WordPress beta 5.5) for the video.
When it doesn't autoplay on the iPhone, it shows an unclickable play button:
Image
How can I make this play button disappear, so that at least a static image shows?
Thanks!
If you know how to code in js(javascript) or knows somebody who does, you could remove the play button icon or even autoplay the video for iPhone.
helpful resources
https://developer.mozilla.org/en-US/docs/Learn
https://www.w3schools.com/js/default.asp
There is this handy npm package that can help its called react-player https://www.npmjs.com/package/react-player
it works with vanillajs to check out a fiddle of the example on the homepage
https://jsfiddle.net/o62snj3p/
Can you show your code? Videos should autoplay on all browsers. For mobile, you need to add the muted attribute.

HTML5 video player doesn't show the controls bar in Chrome?

I am using HTML5 video tag as below-
<video id="videoPlayerId" controls="controls" />
<button onclick="play()"> Play </button>
And with Javascript-
let player = document.getElementById("videoPlayerId")
this.setAttribute('src', 'https://something.com/srcurl.mp4')
player.preload = 'metadata'
function play () {
player.play()
}
On localhost, the video shows controls bar properly but when the same code is uploaded to the LIVE site, the video doesn't show the control bar in Chrome but control bar looks fine in Firefox. So, what could possibly be going wrong on LIVE site causing Chrome to not display the Controls bar?
Also, when I right click on the video on LIVE site in Chrome, it shows "tick mark" next to "Show Control" option but the bar still doesn't show up.
I have also done research on internet and couldn't find any solution so far. There is only once place where the same problem has been reported on Chrome Developer help centre- https://support.google.com/chrome/thread/18545176?hl=en but unfortunately, there has been no response from Chrome team as well.
Further updates, I noticed that the video bar doesn't show only in Vue JS production mode, the production build is generated by WebPack. However it works fine in Development mode. Does this ring bells in anyone's mind?
Please help! Very thanks in advance.

Google Chrome video timeline and volume bar dragging

I am creating a video watching system with the HTML5 video tag. I have one problem and I don't know if the problem is because of my code or of Google Chrome.
Everything works fine until I try to drag the timeline bar or volume bar. Can anybody please help me? The problem is that the moment I click and unclick it does not stop dragging the bar around. So when I drag and leave it, it doesn't stop dragging. I have tried everything like clicking around but the only thing that worked was when I reload the page.
My code:
<video controls width="640" height="264" poster=""><source src="uploads/video1.mp4" />To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video</video>
I Don't think your code is having any issue, It might be because of the type of mp4 file you are using.
Please use following piece of your code working perfectly fine (I have used different mp4 source file)
<video controls width="320" height="264" poster="">
<source src="http://www.w3schools.com/html/movie.mp4" />
To view this video please enable JavaScript, and consider upgrading to a web browser
that supports HTML5 video
</video>

Show controls while HTML5 video is playing

Is there a way to show the controls after a video has started playing. Basically, I'm playing a video with play(), and I want the controls to stay up for a few seconds. Currently (at least on my Android device), the controls fade once the video starts.
Toggling the controls attribute doesn't work, unfortunately.
HTML5 video on Android (iOS too) is not opened inline but in the native player (i.e. outside the browser), so the <video>-tag attributes have no control over what is going to happen in the player.
I don't know if it's possible to "hack" / set-up the native player so I guess you'll have to do research on that. I don't know of any way to remotely influence the behavior of the Android application unfortunately. In case you find out something it would be nice if you could let me know btw.
Also see a recent question of mine (which is rather discouraging unfortunately).

HTML5 video playback on the iPad?

I'm developing a web app, and having trouble with HTML5 video for iPad. This code works fine every where else, not iPad. I just get a video frame, a black box. The HTML is generated in javascript, it is not hardcoded per se.
<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>
Anyone know what could be wrong? (Videos are encoded using handbrake CLI and ffmpeg2theora as specified in Dive Into HTML5).
I think the issue is that it isn't http://serverlocation/places/video.ext. How would I alter it to look like that (with no guarantee that I know server location.) Part of me doubts this because images are served without the http:// and they work fine.
I think I know the problem. iPad chokes when presented with multiple <source> tags. What you can do (to do it simply) is use jQuery to add/remove objects.
HTML:
<div id="movie-wrapper">
<div id="webkit-wrapper">
<video width="480" height="360" controls="controls" src="places/video.mp4"></video>
</div>
<div id="other-wrapper">
<!-- Do your video in a new wrapper for all others -->
</div>
</div>
JS:
$(document).ready( function(){
if($.browser.webkit) {
$('#other-wrapper').remove();
} else {
$('#webkit-wrapper').remove();
}
});
Ideally, you're going to have a conditional for every major browser since you need at least three types of video for complete compatibility. But something like this should resolve the iPad webkit choke.
Edit
Rereading your comment, I want to make sure of something – that you have controls="controls" on the video element as above. From everything I've read, iPad requires that to enable playback. Otherwise, you get... a black screen.
And you might also look into whether there's an encoding problem, per HTML5 Video "Black Screen" on iPad
Edit
Other considerations:
Webserver may not be reporting the filetype properly (you can check this in the error console if it transfers with a warning about type)
If a poster is loading, try directly accessing the link to the mp4 video (see if quicktime plays it in the browser).
Other than that, I have no idea – there's going to continue to be miscommunication of facts unless you post a link to your page with the non-working example.

Categories