This is due to the added playsinline attribute of <video> element in iOS devices. Read more about it on WebKit and Apple.
This will still be useful for you to manipulate video playback with JavaScript, such as arrow keys seeking, spacebar play/pause, video loop, etc..
All major browsers equivalent to IE9 and above.
- Include the javascript in your
<head></head>section of your HTML, before your page-specific javascript.
<script src="videomaster.js"></script>- Be sure to have an element that will contain your video. For example:
<div id="myContainer"></div>- In your javascript, you can create a VideoMaster instance by:
// Compulsory arguments
var container = document.getElementById('myContaienr'); // Or a querySelector string is good too
var videoSrc = ''; // Must have a valid video URL
// Optional configurations and their default values
var acceptedConfig = {
loop: false, // Loop video onended.
muted: false, // If true, video will not have any audio.
volume: 1, // Value ranges from 0 to 1
objectFit: 'contain', // Accepted value: 'cover', 'contain'.
useCanvas: false, // If true, use canvas element as video for all platform.
forceCanvasOniOS: true // If false, iOS devices will use their native video player, which defeats the purpose of this tool.
resetOnEnded: false, // Reset video frame to first frame onended.
trigger: 'click', // Custom user gesture required to start/pause video.
canPause: true, // If false, video cannot be paused.
shortcut: true, // If false, keyboard shortcut will be disabled
seekFactor: 5, // Indidates the number of seconds the video will rewind/forward from keyboard shortcut
onEnded: function(){} // Adds extra onEnded call
}
var myVideo = new VideoMaster(container, videoSrc, acceptedConfig);-
Useful methods:
myVideo.play(): Plays the video.myVideo.pause(): Pauses the video.myVideo.togglePlay(): Toggle video play/pause.myVideo.goTo(seconds): Change your videocurrentTimeto specified time in seconds.myVideo.addEventListener(): Attach events to it easily.myVideo.removeEventListener(): Remove events from it easily.myVideo.on(): alias to.addEventListener().myVideo.off(): alias to.removeEventListener().myVideo.muted: Get or set your video to muted or not muted. Accepts boolean value only.myVideo.volume: Get or set your video's volume. Value range from 0 to 1.myVideo.currentTime: Get your video'scurrentTime. UsemyVideo.currentTime = secondsto achieve same effect asmyVideo.goTo(seconds).myVideo.paused: Check if your video is paused. Returns true if paused.myVideo.duration: Returns your video total duration in seconds.
-
Keyboard shortcuts:
spacekey: Toggle play/pause.leftarrow key: Rewind video to n seconds before.rightarrow key: Forward video to n seconds after.
You can use it when:
- You want to prevent videos from automatically go fullscreen (i.e. on iOS devices).
- You want to create an interactive video content (that actually requires user-induced gesture, i.e., swipe, tap, shake, etc.).
- You want your audiences to be able to keep scrolling the page while video plays.
- You want consistent video playing experience across different devices and platforms (i.e., iOS vs Android);
And more.
- Add video controls support.
This project is inspired by: