Comments (16)
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.
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.
There are a couple issues with your code:
- The video has to appear AFTER querySelector, otherwise it's not gonna find it.
- You can't use
src
on<script>
AND also put code inside. Use two separate tags
from iphone-inline-video.
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.
Yes
from iphone-inline-video.
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.
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.
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:
Here is the timeline on a refresh:
from iphone-inline-video.
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.
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.
Do you think FlowRouter.wait()
and FlowRouter.initialize()
would fix this?
I'll try it a little later.
from iphone-inline-video.
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.
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.
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.
@ciaranfinnegan Good! I added the solution to my test repo as well in case anyone stumbles upon that.
from iphone-inline-video.
@ciaranfinnegan are you also using meteor?
from iphone-inline-video.
Related Issues (20)
- Handle autoplay state and events correctly HOT 1
- Some properties don't work in fullscreen
- Test HOT 1
- Test
- Replace ಠ with IIV? HOT 5
- Some warnings/errors when installing with npm v5.0.3 HOT 1
- [iOS] Autoplay doesn't work with css prop display:none HOT 1
- Use the iphone-inline-video with vidoe. Js HOT 1
- Would this library work on non-webGL devices? HOT 3
- It doesn't work for in-app video HOT 1
- [Deprecation] 'HTMLVideoElement.webkitDisplayingFullscreen' is deprecated. Please use 'Document.fullscreenElement' instead. HOT 4
- option to force IIV to be used on iOS 11 when in low power mode HOT 1
- vpaid enabled ? HOT 1
- Error DOMException HOT 9
- Is there a way to do this on an iframe element instead of <video>? HOT 1
- Common and es modules HOT 2
- ios11.2.5
- video.pause is not a function. in Chrome device Mode with iPhone simulations only. (React) HOT 1
- Control bar not Hidden HOT 1
- React uses enableInlineVideo to cause the ios8 and 9 devices to play video abnormally HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from iphone-inline-video.