एचटीएमएल 5 ट्रैक नहीं दिखा रहा

Question

मैं दुनिया में सबसे आसान HTML5 वीडियो प्लेयर बनाने के लिए कोशिश कर रहा हूँ कैप्शन!

अब क्यों खिलाड़ी की पहचान करता है कैप्शन है कि वहाँ, लेकिन does not उन्हें दिखाने? मैंने अब विभिन्न वीडियो और उपशीर्षक फ़ाइलों को आजमाया है।

Answer 1

ट्रैक टैग अपनी सामग्री एक वेब सर्वर में परोसा जाता है जब काम कर रहा है। इसके अलावा एक विन्यास जोड़ने के लिए मत भूलना जो mime प्रकार को vtt फ़ाइल के रूप में सेट करता है।

<video> 
    <source src="video.mp4" type="video/mp4" /> 
    <track src="video.en.vtt" kind="subtitles" 
     label="English Subtitles" srclang="en" /> 
</video> 

आईआईएस Web.config फ़ाइल के लिए:: यहाँ मेरी उदाहरण है कि आईआईएस पर काम करता है

<configuration> 
    <system.webServer> 
     <staticContent> 
     <remove fileExtension=".vtt" /> 
     <mimeMap fileExtension=".vtt" mimeType="text/vtt" /> 
     </staticContent> 
    </system.webServer> 
</configuration> 

बिलाव सर्वर वेब-INF/web.xml फ़ाइल के लिए:

<web-app> 
    <mime-mapping> 
    <extension>vtt</extension> 
    <mime-type>text/vtt</mime-type> 
    </mime-mapping> 
</web-app> 

के लिए अपाचे सर्वर अपने वेब निर्देशिका में .htaccess फ़ाइल जोड़ने, और कहा कि लाइन लिखने उपशीर्षक माइम प्रकार जोड़ने के लिए:

+०१२३५१६४१०६

AddType text/vtt .vtt 

Answer 2

सुनिश्चित करें कि आपके फ़ाइल के रूप में UTF-8 लगता है कि विशेष वर्ण ठीक से

Answer 3

अच्छी तरह से प्रदर्शित करेगा, अगर आप क्रोम का उपयोग कर रहे हैं, संभावना है कि आप टर्मिनल से इसे शुरू करने की जरूरत है बनाने के लिए बचा लिया गया है, तथा , --disable-वेब-सुरक्षा टाइप लिनक्स के लिए, ... Disable same origin policy in Chrome

Answer 4

में और अधिक मैं इस के लिए एक जवाब नहीं है, लेकिन यह निष्कर्ष निकाला है कि यह एक सर्वर सेटिंग्स मुद्दा है। IE पर कैप्शन IIS पर ठीक काम करते हैं लेकिन क्लाइंट के रूप में IE के साथ देखते समय Nginx सर्वर पर नहीं।

Answer 5

आप को textTracks वस्तु की mode निर्धारित करने की आवश्यकता "दिखा":

var video = document.querySelector('YOUR_VIDEO_SELECTOR'); 

video.addEventListener('load', function() { 
    var tracks = video.textTracks[0]; 
    tracks.mode = 'showing'; 
});