Apple Video Checklist | documentation *

✅ Guide: Safe Video.js Setup for iOS (2024 Edition)

This guide outlines the key steps, rules, and reusable code to ensure Video.js works flawlessly on iOS Safari and desktop — with full support for custom controls (e.g. Nuevo plugin).

✅ 1. iOS / Apple Rules That Must Never Be Broken

Rule	Why It Matters
`playsinline`	Prevents forced fullscreen on iOS Safari
`webkit-playsinline`	Required for older iOS devices
`muted`	Allows autoplay inline
`controls`	Ensures Safari renders player properly (Video.js overrides)
`setControls(false)`	Disables iOS native UI overlay (via JS)
Avoid autoplay without `muted`	Safari won’t allow it inline

✅ 2. Where These Are Fixed in the New Setup

In the HTML:

<video
  muted
  playsinline
  webkit-playsinline
  controls
  preload="auto"
  ...
>

In the JavaScript (`initVideoPlayer`):

player.tech().setControls(false);
player.one('loadedmetadata', function () {
  Array.from(player.textTracks()).forEach(track => {
    const el = track.el || track._el;
    if (el && el.parentNode) el.remove();
    else track.mode = 'disabled';
  });
});

✅ 3. Fighting iOS Fullscreen / Preventing Hijack

✅ Use playsinline, webkit-playsinline, and muted
✅ Call setControls(false) after player is ready
❌ Avoid trying to block fullscreen via exitFullscreen()
✅ Do not rely on user interaction to override iOS autoplay rules

✅ 4. Static Tagging of Player Elements (Post Init)

player.ready(function () {
  const el = player.el();
  el.classList.add('js-video-ready');
  el.setAttribute('data-player-id', 'main-video');
});

You can now use:

document.querySelectorAll('[data-player-id="main-video"]');

<video id="video_445" class="video-js vjs-fluid" controls preload="auto" playsinline webkit-playsinline muted poster="poster.jpg" crossorigin="anonymous" > <source src="your-video.m3u8" type="application/x-mpegURL"> </video>

✅ 6. Optional: Auto-init for All Players

document.querySelectorAll('video.video-js').forEach(el => {
  initVideoPlayer(el.id);
});

✅ 7. Optional: CSS to Block Native Captions

video::-webkit-media-text-track-display {
  display: none !important;
}

🧠 Summary

You’ve now future-proofed your player against:

❌ Safari CC interference
❌ iOS fullscreen hijack
❌ Plugin failures on mobile

And you’ve done it with minimal, reusable code using:

initVideoPlayer(videoId)
Standardized inline video attributes
Safe DOM tagging for later targeting

Use this doc next time iOS Safari gives you a hard time.

Excellent question — and frustratingly, Apple doesn’t centralize this well, but here’s where you can find the most accurate documentation (even if scattered):