I have a problem with my Iframe I put on my next js app.
The code cannot be easier :
<iframe
id="xxxx"
src={urlWebTv + '&playsinline=1'}
className={styles.iframe}
allowFullScreen
allow={'autoplay'}
loading={'eager'}
/>
When I click "Play" on my video, it automatically switches the video to full screen on my iphone... I tried with/without the param : playsinline. It doesn't change anything.
Could you help me ? Thank you.
(It works ok on Android and Web Browser...)
Related
The reason I want todo this is so I can open up a Embeded youtube video in Full screen. At the moment, if I click on the Webview it opens up the youtube video into the native IOS video player. This is what I want.
However, I need to be able todo this programatically without the client clicking it. Why? The user clicks on an image inside a image gallery (image only - no video), so I close the gallery, and this is when I want to open the WebView (programatically trigger a click on it) in full screen (note: when clicking on webview, it opens the youtube video into the player straight away).
Is this even possible?
There are other ways around this which would involve changing the UI/UX, I'd want to try avoid this (if possible).
If you want to use react-native app to view youtube video in full screen, use below code:
$ npm install react-native-youtube -S
$ react-native link
<YouTube
videoId="KVZ-P-ZI6W4" // The YouTube video ID
play={true} // control playback of video with true/false
fullscreen={true} // control whether the video should play in fullscreen or inline
loop={true} // control whether the video should loop when ended
onReady={e => this.setState({ isReady: true })}
onChangeState={e => this.setState({ status: e.state })}
onChangeQuality={e => this.setState({ quality: e.quality })}
onError={e => this.setState({ error: e.error })}
style={{ alignSelf: 'stretch', height: 300 }}
/>
Refer to this link for more details.
My answer is around this question only:
Is this even possible?
=> Yeah possible
If you want to show youtube on Webview for React-native. Here is the link for you:
https://dev.to/mutatedbread/lazy-approach-to-display-youtube-videos-in-a-react-native-app-bfc
It definitely works for both android and ios (I tried it before).
There is one problem that: "you can not go fullscreen with Android."
It happens for all types of media that showed with webview of Android.
This is because Android pollicy. (however they allow to override that)
=> Read this: https://developer.android.com/reference/android/webkit/WebView.html (search for "Full screen support")
To pass by, you can search for some project that re-implement a react-native Webview component for Android. Here is the one i used:
https://www.npmjs.com/package/react-native-android-wv-video but there are others.
If you want self implementation, here is the link:
Playing HTML5 video on fullscreen in android webview
Finally:
After you solve the fullscreen issue for android, you can take advantage of youtube iframe to force auto start or auto fullscreen when load youtube video with this:
https://developers.google.com/youtube/iframe_api_reference
(If you follow instruction from the first link inside this answer, you already had youtube iframe)
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.
Hi i have a video on my page (mobile view), by default its controls attr is turned off. I want to turn them on and show just on FULLSCREEN (I have a custom fullscreen button).
I was trying to add $('#videoAbout').attr('controls', ''); and also $('#videoAbout').attr('controls', 'true'); when Fullscreen is turned on, but it doesn't work on mobiles. On desktop resized to mobile resolution it works fine.
Can anybody help me out?
Here is live example on my webpage.
this page http://falsefeatures.com/aBookForPrivateReading/PlayHeavyWater should autoplay as I understand it.
the code looks like this:
<iframe width="100%" height="166" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/108973626&color=9900EE&auto_play=true&show_artwork=false"></iframe>
the audio does play if button clicked and I can change the button color and show or hide the artwork, as you'd expect. but no autoplay?
I've simplified for debug purposes but I have another page which I'd swear was autoplaying last week just fine. I have tried different browsers, computers, connections: what gives?
~Marqso
your link auto plays fine for me on Chrome.
It won't work on iOS devices though – there's a limitation on Apple's side that prevents media from auto playing in order to save on user's traffic.
This was caused by a regression on our part and was fixed last week.
https://twitter.com/flaneur/status/398439823234846720
Recently I faced a problem with Youtube videos (iframe API) in WebView of Android 4.X devices.
The problem is onShowCustomView() not fired when video starts playing on Android 4.X devices. I searched for reason, why onShowCustomView() not fired? I got answer as in Android 4.X devices WebView has a feature Embedded Video, because of this video ( in HTML5) will be played by WebView and won't display the video in other Layout.
But when user requested Full Screen mode, then onShowCustomView() will be fired.
Actually I need the Full screen mode of youtube video by default, In Youtube's iframe API no such option to enter full screen, user has to press full screen button.
So for my requirement only 2 answers are there.
Disbaling of Embedded Video for my WebView, then it will work like below Android 4.X and onShowCustomView() will be fired.
Setting the full screen mode by default with Javascript in html file supplying to WebView.
So If anybody got solution to my problem please help me otherwise suggest me to solve this.