I have a single page mobile web app running through PhoneGap - so it's running HTML5, CSS3, JQuery. The app provides users the ability to view a different video on each virtual page. The videos are seen through an iframe which adds quite a burden to the application, most of all because I'm having difficulty cleaning up the iframes and their associated docs, dom nodes, and listeners.
I'm looking for advice on how to better clean up the content associated with the YouTube iframe after the user is finished watching the video. This is especially important as I will be submitting the app to the the App store and I understand that poor memory and DOM management can be a killer.
YouTube is embedded with the following code:
<iframe id="youtube_iframe" width="300" height="200" src="//www.youtube.com/embed/clip_id?autoplay=0&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
And the Memory Timeline from Chrome's Dev Tools looks like this:
Related
I want to make a react-native app having the capability of video streaming from a mobile app to a connected browser user. On top of that, I want to overlay some application components so connected users can see video streaming as well as some of the application UI.
For an example take a reference of the below-given image. Here, video streaming is running in the car showroom and there are a few app components shown as an overlay of the video like an app menu and a car image.
I want to achive same functionality and using VideoSDK platform for video streaming service.
So far I have created react-native app and able to stream video through camera to the connected browser user.
Next, I want to add my app menu on top of the video as per the image and therefore i am thinking screenshare with combination of video sharing is way to go.
The above image is the actual implementation using video SDK in the browser but as you can see screen share window is opening in a totally different context which is not the expected implementation.
Can someone suggest how can I achieve the functionality of video streaming having the capability of app overlay components?
I have reviewed your requirement and I am glad to inform you that we do have application with same requirements, for further discussion and demos can we connect over mail i.e. karan10010#gmail.com
I have this code and I embed a Youtube playlist to my website
<iframe width="300" height="165"
src="PLAYLIST_URL?autoplay=1&showinfo=0&loop=1&list=PLAYLIST_ID&rel=0"
frameborder="0" allowfullscreen></iframe>
This works in desktop and it auto play and loop. But I can only listen one track in mobile and does not auto play (iPhone 4S, iOS 7).
This is my webpage : www.hqtunes.com
How can I fix the embed code and can auto play and loop, like on desktop?
Based this thread, autoplay cannot be done on iOS and Android devices. For various reasons (including, but not limited to data usage), Apple doesn't allow auto-playing of videos. You may also check this documentation which stated that "Warning: To prevent unwanted downloads on mobile networks at the user's expense, playback of embedded media can not be launched automatically in Safari for iOS, and only the user can start playback."
I am relatively new to SO, and this is my first question so I hope I get the format & question information correct. I am looking for a plugin or tool that can assist me with a specific display issue.
I have a mobile application that is deployed to both Android and iOS devices. I also have a mobile web application that renders very much like the actual mobile application in the mobile device web browser when the user browses certain parts of the server back end cloud service website on their mobile device. So far so good.
However, when the user browses these parts of the cloud service website on a desktop/laptop, they get the web application view - some of it stretched and not ideally optimised as this is really for viewing on mobile devices. The client would like that a user, on desktop/laptop browser can see a mobile 'simulated' view of the web application.
It has to happen when the user navigates to the page, not through installing chrome plugins etc
I see the ideal solution being something like an image of a generic mobile for when browsing on desktop, centred on the desktop screen, inside of which the web app view is rendered. Is there is plugin/tool that someone out there for this, I have done quite a bit of research and can only find information on emulators for testing etc. In a way all I am looking for is an image that dynamically resizes inside of which a view can be rendered, that looks well across many desktop screen sizes/resolutions etc. Rather than go about this myself (it would be a bit of a CSS learning curve for me) it would be great if something like this already existed.
An implementation like the above would free up real estate on the screen for other items like links and form buttons the client wants
Any direction on this would be greatly appreciated.
I'm developing a web application with AngularJS and I'm using a directive for embedding responsive Youtube videos called youtubeResponsive which allows to embed videos in an iframe with a video id as source parameter.
It all works perfectly on desktop browsers, in fact I also managed to embed a playlist and play it in a loop.
The problem I'm having is now on Chrome Android, on a Nexus 5 device (running Lollipop latest update) the video embedded is not showing and instead I can see a notification of a download going on. Every time I refresh I see the download process restarting but no video is showing. If I click on the download notification to see the file nothing happens.
Of course my aim is to display the video also on mobile with autoplay and loop active.
The output which I can see inspecting the page on mobile using USB debugging (chrome://inspect/#devices)
<iframe id="ytplayer" type="text/html" width="100%" height="202.5" ng-src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque" frameborder="0" allowfullscreen="" video-slug="ZhfUv0spHCY" class="ng-isolate-scope" src="http://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque"></iframe>
I don't see any error on mobile except the same warning I can see on desktop which apparently is not blocking the video from playing at least there.
Resource interpreted as Document but transferred with MIME type application/x-shockwave-flash:
"https://www.youtube.com/v/ZhfUv0spHCY?version=3&autoplay=1&loop=1&controls=0&showinfo=0&rel=0&wmode=opaque".
Anyone experienced the same issue on Android Chrome or on other mobile devices and OS ?
I haven't started testing on AOSP or iOS yet but already on Chrome the issue is quite concerning. Let me know if anyone managed to fix it.
You're specifically requesting the old Flash player widget and not allowing it to upgrade to HTML5, which is required now for mobile support of any kind. You should switch to the YouTube Player API, which requires a few extra lines of code to implement but will work almost anywhere and give you a lot of event data back about videos playing, etc.
https://developers.google.com/youtube/iframe_api_reference
You can still use an IFRAME with this technique, although consider this directive which appears to support the current API:
https://github.com/brandly/angular-youtube-embed
I have a mobile website made in jQuery Mobile and I would like to integrate some parts of it in a Phone Gap mobile app.
The app will provide some offline features (using local html and JS) and will integrate with the mobile website sending forms and receiving its pages (that are already in jQuery Mobile).
What do you think is the best strategy to do this? Should I write services or should I keep the ongoing html pages?
After seeing your comment above, Yes You can wrap it with phonegap and launch in app store. Then consider this, you can create services to return JSON(only for dynamic data) and load all your HTML templates on to the app (wrap with phonegap).
So static data/contents gets loaded from within the app and the dynamic content comes from server. Now enable offline caching for the dynamic contents which you want to enable for offline access.
TO enable offline access, you can either use webkit local storage(5Mb~50Mb) or a native phonegap plugin for more storage.
Hope this helps.