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

phone-inline-video with Meteor? #59

Closed gkrizek closed 8 years ago

gkrizek commented 8 years ago

Do you have any experience using this in a Meteor application?

I'm trying to integrate it, but having a few issues getting it to work. This is EXACTLY what I need. After hours of searching why webkit-playsinline didn't work, this is my last hope.

thanks!

fregante commented 8 years ago

I don't have experience with that, sorry. You just have to select the <video> element and call the function on it normally.

What are the issues exactly?

gkrizek commented 8 years ago

I have tried to several different ways, but I figured this was the way to at least see if it works.

I include the browser.js file like you say in the docs like so:

<html>
<script src="node_modules/iphone-inline-video/dist/iphone-inline-video.browsers.js">
  var video = document.querySelector("video");
  makeVideoPlayableInline(video, false);
</script>

<video autoplay muted webkit-playsinline><source src="http://url.com/video.mp4" type='video/mp4'></video>
</html>

and it still just shows up like normal. Still click the video and it opens to full screen.

The only thing in the console is this:

SyntaxError: Unexpected token '<'
(anonymous function) - phone-inline-video.browser.js:1
fregante commented 8 years ago

There are a couple issues with your code:

  1. The video has to appear AFTER querySelector, otherwise it's not gonna find it.
  2. You can't use src on <script> AND also put code inside. Use two separate tags
gkrizek commented 8 years ago

Noted. I'll try that when I get home and report back. Does this look correct based on your suggestions:

<html>

<video autoplay muted webkit-playsinline><source src="http://url.com/video.mp4" type='video/mp4'></video>

<script src="node_modules/iphone-inline-video/dist/iphone-inline-video.browsers.js"></script>
<script>
  var video = document.querySelector("video");
  makeVideoPlayableInline(video, false);
</script>

</html>
fregante commented 8 years ago

Yes

gkrizek commented 8 years ago

Ok, I tested it with the code above and still nothing. When I run it just like it is above it acts like there is no script at all, but still has the same error in the console.

I did however see a change when I pasted the contents of the file directly in the script tag. Like this:

<script>
/*! npm.im/iphone-inline-video */
var makeVideoPlayableInline=function(){"use strict";function...

  var video = document.querySelector('video');
  makeVideoPlayableInline(video, false);
</script>

Although, it wasn't working properly, there was a difference. With the contents pasted in the script tag, there are no errors in the console. It will autoplay the video (which it didn't before even though I had the tag there), but it autoplays it in full screen. Also, the video is 2 seconds long, but it only plays the first half second or so and then freezes. The timeline in the video still shows 2 seconds, but it will never play longer than a half second.

fregante commented 8 years ago

Are you using meteor in this test?

What device/OS are you using?

Does this demo work there? http://bfred-it.github.io/iphone-inline-video/demo/

gkrizek commented 8 years ago

I think I'm getting somewhere. Yes, I am using Meteor in this test.

I have always been testing on my physical device of iPhone 6 with iOS 9.3. Also tried with several simulators and still the same thing

The Demo works when I navigate to that url in my browser on that phone.

I have found that when I first load the page, the video goes to full screen. But when I stop the video and leave the page open, then add something like <br /> to make Meteor refresh the client with the new code, it works! Meteor uses Hot Code Push so anytime I change a file it will update the client with it. So it seems like something is blocking it on the initial page load that isn't when it just does a code refresh. Does that sound right to you? I know you aren't familiar with Meteor, but do you know how I could find what's stopping it?

Here is the timeline on first page load:

screen shot 2016-07-14 at 5 59 46 am

Here is the timeline on a refresh:

screen shot 2016-07-14 at 6 01 55 am
fregante commented 8 years ago

Can you deploy somewhere so I can take a look?

Try importing and initializing the script the official way instead of using <script> https://guide.meteor.com/using-npm-packages.html

const makeVideoPlayableInline = require('iphone-inline-video');

var video = document.querySelector('video');
makeVideoPlayableInline(video, false);
gkrizek commented 8 years ago

I adjusted my project to use the recommended NPM importing. Still same problem.

While creating a reproduction of the problem I figured out that I'm almost positive it has to do with kadira flow router.

When I added the package and video without Flow Router installed, it worked fine. Once I installed it and setup a route, same exact problem. Here is a reproduction I made:

https://github.com/gkrizek/phone-inline-video-meteor-test

I added my entire meteor project so you should be able to just pull it down and run it.

gkrizek commented 8 years ago

Do you think FlowRouter.wait() and FlowRouter.initialize() would fix this?

I'll try it a little later.

fregante commented 8 years ago

That's... a bit strange.

Normally .play() makes the video go fullscreen, right? So IIV breaks that .play() and replaces it with a fake one that should never go fullscreen because the video never actually plays.

It looks like video.load() (called inside IIV's .play()) still triggers the native playback anyway, though. Which is ridiculous. .load should not .play.

Test:

  this.autorun(() => {
    var video = document.querySelector('video');
    video.load();
  });

Fullscreen playback can only ever happen when the action is user-initiated, in short now it's happening on click here and not when you just load the address /video

Anyway, even more ridiculously, the solution is to remove the autoplay attribute so that .play() isn't automatically called... and then call it right after.

this.autorun(() => {
    var video = document.querySelector('video');
    makeVideoPlayableInline(video, false);
    video.play();
});
gkrizek commented 8 years ago

Very strange, but a pretty easy work-around. Thank you for the help!!

This is going to be a huge help for me.

ciaranfinnegan commented 8 years ago

And me, I've been struggling with the same issue, thanks!

On Fri, Jul 15, 2016 at 3:46 AM +1000, "Graham Krizek" notifications@github.com<mailto:notifications@github.com> wrote:

Very strange, but a pretty easy work-around. Thank you for the help!!

This is going to be a huge help for me.

You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHubhttps://github.com/bfred-it/iphone-inline-video/issues/59#issuecomment-232739317, or mute the threadhttps://github.com/notifications/unsubscribe/AQGIIy3Mow8uzLIQnzdFb-ZNm0l8qnZDks5qVnX8gaJpZM4JLW00.

gkrizek commented 8 years ago

@ciaranfinnegan Good! I added the solution to my test repo as well in case anyone stumbles upon that.

fregante commented 8 years ago

@ciaranfinnegan are you also using meteor?