Alternative to webkit-playsinline for Safari - javascript

I have a tool (Articulate Storyline) that generates interactive videos embedded into web pages. When opening from mobile devices or from Safari, the interaction doesn't work. I found that the attribute webkit-playsinline could solve my issue, but it works on the video tag, not on the object tag (which is the one being generated by my tool.
I have a similar issue with Cordova: my hybrid app for iOS is not interactive, while the one for Android is.
Is there a way I can force the same behavior on the object tag (or in its containing iframe tag)?

I don't think this is possible with an iFrame tag, but I do believe it is possible in a Cordova application. In the Cordova settings for your webview, set AllowInlineMediaPlayback to YES and MediaPlaybackRequiresUserAction to NO. I don't know too much about Cordova applications, but I do know that these keys map to the UIWebView allowInlineMediaPlayback and mediaPlaybackRequiresUserAction properties, which protect against automatic video playback in a webview.

Related

embed youtube video doesn't play automatically on device mode of google chrome

I'm trying to add embed youtube video in my Ionic project, just using iframe.
Once I added, it works on the normal web browser(Google Chrome).
However, if I changed view mode to device mode(F12 & Ctrl+Shift+M), and refresh browser, the embed video stopped auto-playing. Is there anyone have experience before fixed like this problem?
Here is the similar case with mine: http://jsfiddle.net/eFLqJ/1005/
This module will be helpful for your problem: https://github.com/orizens/ng2-youtube-player

Detect if the UIWebView can play video inline on iPhone ( allowsInlineMediaPlayback )

I am trying to tell if my video is going to play inline once the user starts the video (as apposed to fullscreen/in the native video player) on an iPhone in a UIWebView before the video has started. I have no way of knowing if the UIWebView has the setting allowsInlineMediaPlayback = YES as i do not know in what app or on what page my video is being displayed.
My goal is to only show the video if it can be played inline.
Is there any way to read the allowsInlineMediaPlayback setting from javascript, or detect if my video will play inline or not?
Everything I have read on the apple developers website seems to suggest that it will automatically play in full screen mode in safari. Now if they are using another app, as far as I know you do not have access to that apps UIWebViews properties. However, in an attempt to not be totally useless, here is a link to all of the methods you can query and you might find some useful information in there.
https://developer.apple.com/library/safari/documentation/AudioVideo/Reference/HTMLMediaElementClassReference/HTMLMediaElement/HTMLMediaElement.html#//apple_ref/doc/uid/TP40009355-CH18-SW27
Some more information that may be useful to you.
https://developer.apple.com/library/safari/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW1

Disable WebView's Embedded Video feature in Android 4.X devices

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.

Does JavaScript have to be enabled to play embedded video?

In order to view an embedded video on a web-page, is it absolutely necessary to have javascript
enabled - assuming the web page is not in the latest HTML5 format and hence has none of
the newer type tags?
I have noticed that YouTube does not work with JS disabled and I was wondering
whether it was a conscious decision on YouTube's part to work only with JS enabled or
did they really have no choice.
The embed code for YouTube is basically an iframe that links to a normal HTML page that uses JavaScript to load in the video you want to see.
In general, you can view video without JavaScript enabled. Most videos are played through Flash, which you can include directly into your page with either an object tag or an embed tag.
There are libraries, such as SWFObject that will put those players into your page for you, but do so through the use of JavaScript. If you want to use a library like that, you will need JavaScript enabled.
Also, if your browser does support HTML5, you can load video directly into the page with the video tag, without the need of JavaScript.
Youtube wants you to have Javascript enabled to deliver advertising.
The player you want to use to embedd the video will tell you if Javascript has to be enabled or not.
Most of the Flash based players work without Javascript enabled, some other don't.
If you are going to embedd a QuickTime video, you don't need to have Javascript enabled to play it

Javascript, Smartphone detection for videos?

If there's a better way I am all for it. But I wanna detect a smartphone user on my site.
Whether they be a webOS, Android, or iPhone OS phone. I have a flash video on my site, but when I detect a smartphone users I want it to be a HTML5 video on the site instead.
You could try using this js library: http://videojs.com/
Here is a link to a javascript fix that I used in a similar situation. It not so much detects devices such as smart phones, rather detects whether the user has is able to view flash or not, displaying flash content first and falling back with whatever you specify if flash is not installed.
http://www.featureblend.com/javascript-flash-detection-library.html
Really simple to use and it played nicely with jQuery when I used it.
-Paul

Categories