Coder Social home page Coder Social logo

Comments (16)

fregante avatar fregante commented on May 22, 2024

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?

from iphone-inline-video.

gkrizek avatar gkrizek commented on May 22, 2024

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

from iphone-inline-video.

fregante avatar fregante commented on May 22, 2024

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

from iphone-inline-video.

gkrizek avatar gkrizek commented on May 22, 2024

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>

from iphone-inline-video.

fregante avatar fregante commented on May 22, 2024

Yes

from iphone-inline-video.

gkrizek avatar gkrizek commented on May 22, 2024

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.

from iphone-inline-video.

fregante avatar fregante commented on May 22, 2024

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/

from iphone-inline-video.

gkrizek avatar gkrizek commented on May 22, 2024

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

from iphone-inline-video.

fregante avatar fregante commented on May 22, 2024

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);

from iphone-inline-video.

gkrizek avatar gkrizek commented on May 22, 2024

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.

from iphone-inline-video.

gkrizek avatar gkrizek commented on May 22, 2024

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

I'll try it a little later.

from iphone-inline-video.

fregante avatar fregante commented on May 22, 2024

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();
});

from iphone-inline-video.

gkrizek avatar gkrizek commented on May 22, 2024

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

This is going to be a huge help for me.

from iphone-inline-video.

ciaranfinnegan avatar ciaranfinnegan commented on May 22, 2024

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

On Fri, Jul 15, 2016 at 3:46 AM +1000, "Graham Krizek" <[email protected]mailto:[email protected]> 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//issues/59#issuecomment-232739317, or mute the threadhttps://github.com/notifications/unsubscribe/AQGIIy3Mow8uzLIQnzdFb-ZNm0l8qnZDks5qVnX8gaJpZM4JLW00.

from iphone-inline-video.

gkrizek avatar gkrizek commented on May 22, 2024

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

from iphone-inline-video.

fregante avatar fregante commented on May 22, 2024

@ciaranfinnegan are you also using meteor?

from iphone-inline-video.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.