HTML5 इंलाइन वीडियो: iPhone बनाम iPad/ब्राउज़र

iOS पर इंलाइन वीडियो प्लेबैक

iOS पर, डिफ़ॉल्ट रूप से वीडियो फुलस्क्रीन मोड में चलते हैं (iPhone पर), जो अन्य वेब सामग्री के साथ एक साथ प्लेबैक को रोकता है। playsinline एट्रिब्यूट (और विरासत webkit-playsinline) इंलाइन प्लेबैक सक्षम करता है।

एट्रिब्यूट्स

उदाहरण: इंलाइन वीडियो

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>इंलाइन वीडियो डेमो</title>
    <style>
        .video-container {
            max-width: 100%;
            margin: 20px auto;
        }
        video {
            width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.15);
        }
        .controls-info {
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-top: 10px;
            font-size: 14px;
            color: #666;
        }
    </style>
</head>
<body>
    <h2>iOS इंलाइन वीडियो प्लेबैक</h2>
    
    <div class="video-container">
        <video id="myVideo" 
               src="https://www.w3schools.com/html/mov_bbb.mp4" 
               playsinline 
               webkit-playsinline
               controls>
            आपका ब्राउज़र वीडियो टैग का समर्थन नहीं करता।
        </video>
        <div class="controls-info">
            नोट: iPhone पर, यह वीडियो फुलस्क्रीन के बजाय इंलाइन चलेगा 
            (यदि iOS 10+ और playsinline समर्थित है)।
            iPad पर यह डिफ़ॉल्ट रूप से इंलाइन चलता है।
        </div>
    </div>
    
    <h3>कस्टम कंट्रोल्स के साथ इंलाइन वीडियो</h3>
    <div class="video-container">
        <video id="customVideo" 
               src="https://www.w3schools.com/html/mov_bbb.mp4" 
               playsinline 
               webkit-playsinline>
        </video>
        <div style="display:flex; gap:10px; margin-top:10px; flex-wrap:wrap;">
            <button onclick="customVideo.play()">▶ चलाएँ</button>
            <button onclick="customVideo.pause()">⏸ रोकें</button>
            <button onclick="customVideo.currentTime = 0">⏮ रीस्टार्ट</button>
            <label>गति: 
                <input type="range" min="0.5" max="2" step="0.1" value="1" 
                       oninput="customVideo.playbackRate = this.value">
                <span id="rateDisplay">1.0x</span>
            </label>
        </div>
    </div>
    
    <script>
        const customVideo = document.getElementById('customVideo');
        customVideo.addEventListener('ratechange', () => {
            document.getElementById('rateDisplay').textContent = customVideo.playbackRate.toFixed(1) + 'x';
        });
    </script>
</body>
</html>

iOS वेबव्यू (नेटिव ऐप्स) के लिए

यदि आप WKWebView (iOS) या WebView (Android) में वेब सामग्री एम्बेड कर रहे हैं:

iOS (Swift)

import WebKit

let webView = WKWebView()
let configuration = WKWebViewConfiguration()
// इंलाइन मीडिया प्लेबैक सक्षम करें (डिफ़ॉल्ट iPhone पर false)
configuration.allowsInlineMediaPlayback = true
// iOS 10+ पर Picture-in-Picture के लिए
configuration.allowsPictureInPictureMediaPlayback = true

// या प्रोग्रामेटिक रूप से
webView.configuration.allowsInlineMediaPlayback = true

Android (Kotlin/Java)

// Android WebView में डिफ़ॉल्ट रूप से इंलाइन प्लेबैक समर्थित है
WebView webView = findViewById(R.id.webView);
WebSettings settings = webView.getSettings();
settings.setJavaScriptEnabled(true);
// Android 5.0+ पर इंलाइन प्लेबैक के लिए
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
    settings.setMediaPlaybackRequiresUserGesture(false);
}

iOS संस्करण व्यवहार सारांश

* iOS 14+ में, उपयोगकर्ता सेटिंग्स में "फुलस्क्रीन वीडियो" बंद कर सकते हैं।

सर्वोत्तम प्रथाएँ

1. हमेशा दोनों एट्रिब्यूट्स शामिल करें: playsinline webkit-playsinline
2. controls एट्रिब्यूट जोड़ें ताकि उपयोगकर्ता प्लेबैक नियंत्रित कर सके
3. preload="metadata" उपयोग करें तेज़ प्रारंभ के लिए
4. म्यूटेड ऑटोप्ले के लिए: autoplay muted playsinline

<!-- म्यूटेड ऑटोप्ले इंलाइन (अधिकांश ब्राउज़र्स में काम करता है) -->
<video src="video.mp4" autoplay muted playsinline loop></video>