search

fregante / iphone-inline-video

📱 Make videos playable inline on the iPhone (prevents automatic fullscreen)
https://npm.im/iphone-inline-video
MIT License
2.06k stars 298 forks source link

Video playback for Chrome / Android browsers #47

Closed chrisamsterdam1986 closed 8 years ago

chrisamsterdam1986 commented 8 years ago

Hi mate,

I truly love what you build here! It works so well on Safari iOS and it is just perfectly solid.

However, when I open my website on iOS Chrome or any Android browser, it doesn't trigger the video. Do you know if there is something we (I) can do to make this work?

Just for reference, this is the link: http://www.happiness-design.com

I'm much looking forward to your feedback, and thanks again 👍

Cheers, Chris Constandse

fregante commented 8 years ago

I tested it on Chrome-iOS and it does work because it's still Safari behind it.

The main reason why it's only being applied to iOS is because I can't verify that it works correctly on all the browser variants of Android and whether it's needed in the first place. All the Android phones I tested just played the video inline natively.

If you can test this on actual devices and not just emulators, try setting the third parameter to false:

makeVideoPlayableInline(video, true /*hasAudio*/, false /* false = apply to all browsers*/);

If you do, please report back your findings.

Additionally, have a look at this version: https://github.com/bfred-it/iphone-inline-video/tree/src-change-support It's a test that will eventually become the next version, but it hasn't yet because I think it might interfere exactly in your situation.

chrisamsterdam1986 commented 8 years ago

Hi Frederico,

Thanks a lot for your quick response. I will test it later today and get back to you as soon as I know more.

Cheers, Chris Constandse

Full stack webdesigner http://constandse.design http://100xdesign.com

On Wed, Jun 1, 2016 at 12:53 PM, Federico Brigante <notifications@github.com

wrote:

I tested it on Chrome/iOS and it does work https://cloud.githubusercontent.com/assets/1402241/15707019/5cba5574-27ab-11e6-820f-d3372f56cd0c.png because it's still Safari behind it.

The main reason why it's only being applied to iOS is because I can't verify that it does work on all the browser variants of Android and whether it's needed in the first place. All the Android devices I tested just played the video inline natively.

If you can test them, try setting the third parameter to false:

makeVideoPlayableInline(video, true /hasAudio/, false /* false = apply to all browsers*/);

Make sure you test this on actual devices and not just emulators.

If you do, please report back your findings.

Additionally, have a look at this version: https://github.com/bfred-it/iphone-inline-video/tree/src-change-support It's a test that will eventually become the next version, but it hasn't yet because I think it might interfere exactly in your situation.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bfred-it/iphone-inline-video/issues/47#issuecomment-222958797, or mute the thread https://github.com/notifications/unsubscribe/AQhIR73a0M064d9VRXW5E4JKkXKYeNHQks5qHWSjgaJpZM4IrZbY .

chrisamsterdam1986 commented 8 years ago

Hi Frederico,

I just checked my website on Chrome iOS and it works now. Awesome!

However, when I check with Android Chrome, it gives me a black background screen with the white text on top... Do you have any ideas?

Again, your help is much appreciated, and I'm more than happy to buy you a digital coffee if we manage to find the solution to this :-)

See a screenshot here: https://cloud.githubusercontent.com/assets/17320007/15709491/519abdbe-2805-11e6-8b82-1e042a58e662.png

Cheers, Chris

fregante commented 8 years ago

It looks like it's not playing, do you see any errors in the console? Can you try running this?

var video = document.querySelector('.IIV');
console.log(video.networkState, video.readyState);
chrisamsterdam1986 commented 8 years ago

Hi Frederico,

Thanks again for following up so quickly.

Unfortunately now the video doesn't work at all anymore on mobile... Please see the attached screenshot. However, I don't have a div with the classname '.IIV'. Should I create that?

Screenshot: https://cloud.githubusercontent.com/assets/17320007/15713520/100814ac-2817-11e6-867c-f770638367b5.png

I'm hoping to hear from you soon, Chris

fregante commented 8 years ago

No, leave the initialization code for iphone-inline-video (in short, IIV) as it was initially.

You have to run that code in the Android browser's remote console and see the results. The IIV class is automatically attached to the video when IIV runs.

chrisamsterdam1986 commented 8 years ago

I'm sorry, but I don't fully understand what to do here... :-)

Is it correct that I should put the following code in the index.html? var video = $('video').get(0); var video = document.querySelector('.IIV'); makeVideoPlayableInline(video, false /hasAudio/, false /* false = apply to all browsers*/); console.log(video.networkState, video.readyState);

And what do you mean with "run code in the android browser's remote console"? I'm not a very experienced coder, so I hope you don't mind too much. I can create an account at BrowserStack if that would help?

Thanks again so much. Chris

fregante commented 8 years ago

The code I just gave you doesn't go in the site's JS files, but in the Console panel of the Developer Tools. You can find all the info about it here: https://developer.chrome.com/devtools/docs/remote-debugging

To run code on Browserstack you need the paid version

chrisamsterdam1986 commented 8 years ago

Hi Frederico,

Thanks for the link :) unfortunately I don't own an Android machine (testing at colleagues), though I don't mind buying a month subscription for BrowserStack.

I just checked your demo site on an Galaxy S5 Android Chrome browser, and it only showed me two green screens and the video didn't autoplay. I checked this link: http://bfred-it.github.io/iphone-inline-video/demo/autoplay.html

See the mobile screenshots here:

Do you think the problem might be bigger?

Cheers, Chris

fregante commented 8 years ago
  1. The demo is only enabled on iPhone

  2. You need to run the code in the console on Browserstack on your own Android-enabled website. Click on "DEVTOOLS"

    var video = document.querySelector('.IIV');
console.log(video.networkState, video.readyState);
  3. Paste the output of that code here.
chrisamsterdam1986 commented 8 years ago

Hi Frederico,

Ah, that makes sense :-) I will run it this evening and let you know the results!

Thanks again for your patience, it is much appreciated!

Cheers, Chris

fregante commented 8 years ago

I tried myself.

In short, you don't need IIV on Android unless you need autoplay. And IIV's autoplay doesn't work on Android.

chrisamsterdam1986 commented 8 years ago

That’s unfortunate. However, thank you very much for all the help!

On 01 Jun 2016, at 17:34, Federico Brigante notifications@github.com wrote:

Closed #47 https://github.com/bfred-it/iphone-inline-video/issues/47.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/bfred-it/iphone-inline-video/issues/47#event-678597260, or mute the thread https://github.com/notifications/unsubscribe/AQhIR4YNEitz8AhUMnX-DEiTltob7C4bks5qHaacgaJpZM4IrZbY.

fregante commented 8 years ago

FYI Native support is coming in Chrome 53!

https://developers.google.com/web/updates/2016/07/autoplay