https://github.com/Experience-Monks/ios-video-test

a test of inline iOS video playback
https://github.com/Experience-Monks/ios-video-test

Last synced: 4 months ago
JSON representation

a test of inline iOS video playback

• Host: GitHub
• URL: https://github.com/Experience-Monks/ios-video-test
• Owner: Experience-Monks
• License: mit
• Created: 2015-11-03T22:07:38.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2016-03-17T14:34:00.000Z (over 8 years ago)
• Last Synced: 2024-06-22T19:42:28.606Z (6 months ago)
• Language: JavaScript
• Homepage: http://jam3.github.io/ios-video-test
• Size: 4.75 MB
• Stars: 45
• Watchers: 8
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# ios-video-test

Testing HTML5 video in iPhone5S, iOS9. Features:

- Inline Playback (i.e. no full screen w/ controls)

- Auto plays (if `muted` is passed)

- WebGL Processing (if available; falls back to Canvas2D)

- Going into landscape hides status bars

- Letterboxing

## Demo

The demo, which should play inline and with WebGL effects in iPhone iOS9.

http://jam3.github.io/ios-video-test/

The following shows auto play in iOS9, which is only supported when muted.

http://jam3.github.io/ios-video-test/?muted=true

## Screenshots

Playback in portrait:



After rotating into landscape:



After tapping on top of screen to show status bars:



## How Does it Work?

This renders video frames to a `` element. It uses WebGL if available, otherwise Canvas2D.

For iPhone browsers, this uses a hack to avoid the full-screen controls (which destroys WebGL processing).

When `muted` is true, it simply seeks forward to the next frame and renders the `` to the canvas. This allows it to auto play.

When `muted` is false, and audio is desired, this creates two media elements: a muted `` element, and a `` element, pointing to the same source. Once both are loaded and ready, it plays the Audio tag, and on update, seeks the video to the `audio.currentTime` to keep things in sync.

In other browsers and on desktop, the rendering is more standard for best performance and sync. It is simply a `` element rendered every frame into a WebGL texture.

## Limitations

- This has only been tested on iPhone 5S iOS9.

- Sometimes the demo will time out; for some reason the `'canplaythrough'` event is not always fired 

- This has only been tested with a limited set of video/audio formats and a small & short video file

- This may cause audio sync problems with long videos

## Roadmap

The source will eventually be modularized, and more experimentation will be done with other video/audio formats.

## License

MIT, see [LICENSE.md](http://github.com/Jam3/ios-video-test/blob/master/LICENSE.md) for details.