सफारी या आईओएस पर पोस्टर का उपयोग किए बिना एचटीएमएल 5 वीडियो थंबनेल कैसे प्राप्त करें?

मैंने एमपी 4 प्रारूप के साथ एचटीएमएल 5 वीडियो एम्बेड किया है। "पोस्टर" विशेषता का उपयोग किए बिना पोस्टर की तरह थंबनेल छवि कैसे प्राप्त करें। सफारी और आईओएस पर यह समस्या आ रही है। मैंने नीचे उल्लिखित कोड जैसे वीडियो जोड़े हैं।सफारी या आईओएस पर पोस्टर का उपयोग किए बिना एचटीएमएल 5 वीडियो थंबनेल कैसे प्राप्त करें?

<video height=350 id='TestVideo' webkit-playsinline><source src='test.mp4' type=video/mp4></video>

क्रोम, आईई, फ़ायरफ़ॉक्स पर वीडियो का पहला फ्रेम थंबनेल छवि के रूप में आ रहा है, लेकिन सफारी और आईओएस पर नहीं आ रहा है।

स्रोत

2016-12-21 vedankita kumbhar

क्या आप अपना कोड जोड़ सकते हैं? –

ऑटोप्ले के साथ एक समाधान है लेकिन यह केवल आईओएस 10+ – Hokusai

स्रोत: How to set the thumbnail image on HTML5 video?

यह मेरे लिए काम किया:

<img src="thumbnail.png" alt="thumbnail" /> 
/* code for the video goes here */

अब jQuery वीडियो खेलते हैं और के रूप में

$("img").on("click", function() { 
    $(this).hide(); 
    // play the video now.. 
})

स्रोत

2016-12-21 05:45:29

में काम करेगा, लेकिन मैं वीडियो के लिए अलग छवि या पोस्टर का उपयोग नहीं करना चाहता क्योंकि वीडियो गतिशील रूप से आ रहा है और मैं अलग छवि जोड़कर पुन: कार्य नहीं करना चाहता हूं। आपको पोस्टर के रूप में वीडियो सेट के पहले फ्रेम के बारे में कोई जानकारी है। –

क्या आप जेएस प्लगइन का उपयोग कर मन करते हैं? –

मैं किस प्लगइन का उपयोग कर सकता हूं? –

छवि को छिपाने आप सर्वर भंडारण के बिना यह करने के लिए चाहते हैं का उपयोग कर साइड इमेजेस यह संभव है, हालांकि थोड़ा सा गुंजाइश ... वीडियो के पहले फ्रेम को रिकॉर्ड करने के लिए कैनवास का उपयोग करता है और उसके बाद वीडियो तत्व पर ओवरले करता है। पोस्टर के लिए स्रोत के रूप में कैनवास के लिए यूआरएल का उपयोग करना संभव हो सकता है (उदाहरण के लिए video.poster = c.toDataURL();) लेकिन इसके लिए सही सीओआरएस सेटअप की आवश्यकता है (सुनिश्चित नहीं है कि वीडियो आपके सर्वर पर था, और यदि आप उस पर नियंत्रण रखते हैं, तो लिया सबसे सुरक्षित विकल्प)। यह सबसे अच्छा काम करेंगे, तो वीडियो सही ढंग से स्ट्रीमिंग के लिए एन्कोड किया गया है (ताकि MOOV परमाणु वीडियो के सामने है, अन्यथा यह ओवरले आकर्षित करने के लिए धीमी गति से होगा - और अधिक विस्तार के लिए this answer देखें)

HEAD वीडियो के लिए स्टाइल शामिल और ओवरले में

<head> 
    <style> 
    video_box{ 
     float:left; 
    } 
    #video_overlays { 
     position:absolute; 
     float:left; 
     width:640px; 
     min-height:264px; 
     background-color: #000000; 
     z-index:300000; 
    } 
    </style> 
</head>

(आप अपने आवेदन के अनुरूप करने के आकार और स्थिति को समायोजित करने की आवश्यकता होगी) BODY आप ओवरले और वीडियो के लिए div की आवश्यकता होगी। ओवरले div एक onclick हैंडलर ओवरले को छिपाने के लिए और वीडियो के चलते

<div id="video_box"> 
    <div id="video_overlays" onclick="this.style.display='none';document.getElementById('video').play()"></div> 

    <video id="video" controls width="640" height="264"> 
     <source src="BigBuck.mp4" type='video/mp4'> 
    </video> 

    </div> 
</div>

अंत में आप कोड है कि वीडियो लोड होगा की आवश्यकता होगी शुरू करते हैं, पहली फ्रेम करने की कोशिश और एक कैनवास है कि आप तो डालने में दृश्य लोड है ओवरले में

<script> 

function generateOverlay() { 
    video.removeEventListener('seeked',generateOverlay);/tidy up the event handler so it doesn't redraw the overlay every time the user manually seeks the video 
    var c = document.createElement("canvas"); 
    var ctx = c.getContext("2d"); 
    c.width = 640; 
    c.height = 264; 
    ctx.drawImage(video, 0, 0, 640, 264); // take the content of the video frame and place in canvas 
    overlay.appendChild(c); // insert canvas into the overlay div 
} 

    // identify the video and the overlay 
    var video = document.getElementById("video"); 
    var overlay = document.getElementById("video_overlays"); 

    // add a handler that when the metadata for the video is loaded it then seeks to the first frame 
    video.addEventListener('loadeddata', function() { 
     this.currentTime = 0; 
    }, false); 

    // add a handler that when correctly seeked, it generated the overlay 
    video.addEventListener('seeked', function() { 
    // now video has seeked and current frames will show 
    // at the time as we expect 
     generateOverlay(); 
    }, false); 

    // load the video, which will trigger the event handlers in turn 
    video.load(); 

</script>

स्रोत

2017-04-05 21:45:29 Offbeatmammal

सफारी या आईओएस पर पोस्टर का उपयोग किए बिना एचटीएमएल 5 वीडियो थंबनेल कैसे प्राप्त करें?

उत्तर

संबंधित मुद्दे