पढ़ना मेटाडाटा Captionator

मैं मुसीबत एक काम उदाहरण है कि एक WebVTT फ़ाइल है, जो एक एचटीएमएल 5 पेज में एक <video> की <track> तत्व द्वारा निर्दिष्ट किया गया था से मेटाडाटा पढ़ता हो रही हो रहा है का उपयोग कर। स्पष्ट होने के लिए, मैं वीडियो फ़ाइल से मेटाडेटा को पढ़ने के बारे में बात नहीं कर रहा हूं (जैसा कि आप उदाहरण के लिए एमपीईजी ट्रांसपोर्ट स्ट्रीम के साथ करेंगे)। मैं किस बारे में बात कर रहा हूं <track> तत्व है जिसका उपयोग कैप्शनिंग वीडियो के लिए किया जाता है।पढ़ना मेटाडाटा Captionator

उपशीर्षक
विवरण
कैप्शन
नेविगेशन
अध्याय
मेटाडाटा

<track>

kind

मैं कोशिश कर रहा हूँ जी मेटाडाटा का उपयोग करने के लिए संबंधित वेबवीटीटी फ़ाइल में संग्रहीत पाठ तक पहुंचने के लिए टाइप करें, जिसे मैं जावास्क्रिप्ट का उपयोग करके हेरफेर करना चाहता हूं। मुझे पता है कि यह संभव है, क्योंकि यह mentioned by Silvia Pfeiffer के साथ-साथ by the maker of Captionator है, जो जावास्क्रिप्ट पॉलीफिल है जिसका उपयोग मैं <track> टैग की व्याख्या करने की कार्यक्षमता को लागू करने के लिए कर रहा हूं। हालांकि, मैं इसे काम करने के लिए नहीं मिल सकता है।

मेरा कोड Captionator प्रलेखन के कैप्शन उदाहरण पर आधारित है। मैंने मेटाडेटा पुनर्प्राप्त करने के लिए एक बटन जोड़ा और जब मैं बटन क्लिक करता हूं तो इसे प्रदर्शित करता हूं। दुर्भाग्य से यह मेटाडेटा के बजाय "अपरिभाषित" प्रदर्शित करता रहता है। कोई विचार क्या मैं गलत तरीके से कर सकता हूं? वैकल्पिक रूप से, क्या किसी को पता है कि एक कामकाजी उदाहरण कहां है कि मैं देख सकता हूं? मुझे कहीं भी नहीं मिल रहा है।

तुम मेरे कोड पर एक नज़र लेने के लिए परवाह है, तो मैं इसे नीचे दिये है:

<!DOCTYPE html> 
<html> 
    <head> 
     <title>HTML5 Video Closed Captioning Example</title> 
     <meta charset="utf-8"> 
     <link rel="stylesheet" type="text/css" media="screen" href="js/Captionator-v0.5-12/css/captions.css"/> 
    </head> 
    <body> 
     <h1>HTML5 Video Closed Captioning Example</h1> 
     <div> 
      <p id="metadataText">Metadata text should appear here</p> 
      <input type='button' onclick='changeText()' value='Click here to display the metadata text'/> 
     </div> 

     <video controls autobuffer id="videoTest" width="1010" height="464"> 
      <source src="http://localhost:8080/Videos/testVideo.webm" type="video/webm" /> 
      <source src="http://localhost:8080/Videos/testVideo.mp4" type="video/mp4" /> 

      <!-- WebVTT Track Metadata Example --> 
      <track label="Metadata Track" kind="metadata" src="http://localhost:8080/Videos/Timed_Text_Tracks/testVideo_metadata.vtt" type="text/webvtt" srclang="en" /> 
     </video> 

     <!-- Include Captionator --> 
     <script type="text/javascript" src="js/Captionator-v0.5-12/js/captionator.js"></script> 

     <!-- Example Usage --> 
     <script type="text/javascript" src="js/Captionator-v0.5-12/js/captionator-example-api.js"></script> 
     <script type="text/javascript"> 
      window.addEventListener("load",function() { 
       captionator.captionify(null,null,{ 
        debugMode: !!window.location.search.match(/debug/i), 
        sizeCuesByTextBoundingBox: !!window.location.search.match(/boundingBox/i), 
        enableHighResolution: !!window.location.search.match(/highres/i), 
       }); 

       var videoObject = document.getElementsByTagName("video")[0]; 
       videoObject.volume = 0; 
       document.body.appendChild(generateMediaControls(videoObject)); 
      },false); 

      function changeText() { 
       document.getElementById('metadataText').innerHTML = testVar; 
       var cueText = document.getElementById("video").tracks[0].activeCues[0].getCueAsSource(); 
       document.getElementById('metadataText').innerHTML = cueText; 
      } 
     </script> 
    </body> 
</html>

मेरे WebVTT फ़ाइल इस तरह दिखता है:

WEBVTT 

0 
00:00.000 --> 00:04.000 
Testing 1 2 3 . . .

स्रोत

2012-02-21 Steph

अरे - मैं कैप्शनेटर का डेवलपर हूं, और पहली नज़र में आप जो कर रहे हैं वह सही लगता है। मैं इस संभावना को देख रहा हूं कि आपको एक बग मिल सकती है - और मुझे जो मिल रहा है उसके साथ मैं एक उत्तर पोस्ट करूंगा। :) – Christopher

जिस तरह से आप क्यू तक पहुंच रहे हैं वह सही है - वहां कोई समस्या नहीं है (हालांकि .tracks संपत्ति से .textTracks संपत्ति से कैप्शनेटर 0.6 में कोई बदलाव होगा, विनिर्देश के साथ लाइन में अधिक होना चाहिए। यदि आप सहन कर सकते हैं कभी-कभार मैं 0 का उपयोग करने की सलाह दूंगा।6 इसके बड़े मानक अनुपालन के लिए - मैंने .textTracks का उपयोग करने के लिए नीचे दिए गए कोड को लिखा है - यदि आप स्थिर शाखा का उपयोग करना जारी रखना चाहते हैं तो .tracks के लिए विकल्प।)

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

आप कैप्शनेटर को लोड करने के लिए भी इंतजार नहीं कर रहे हैं - संभावित रूप से कोई उपयोगकर्ता अनजाने में बटन पर क्लिक करने से पहले क्लिक कर सकता था - एक बुरा जावास्क्रिप्ट त्रुटि ट्रिगर करना। आपके स्थानीय बॉक्स पर परीक्षण करते समय यह कोई समस्या नहीं होगी, लेकिन जैसे ही आप इंटरनेट पर तैनात करेंगे, आप दौड़ की सभी स्थितियों और अन्य नास्टियों को देख सकेंगे। बटन को अक्षम करने पर विचार करें जब तक कि पृष्ठ और कैप्शन डेटा दोनों लोड नहीं हो जाते। इसलिए भविष्य में यह एक ही तरीका है कि आप मूल के साथ बातचीत करेंगे होगा -

मैं अधिक से अधिक निकट वास्तविक जे एस एपीआई जो ब्राउज़रों में बहुत जल्द ही लैंडिंग हो जाएगा करने के लिए Captionator एपीआई बनाने के लिए कोशिश की है ब्राउज़र कार्यक्षमता। जैसे ही कार्यक्षमता मूल रूप से उपलब्ध हो जाती है, कैप्शनेटर रास्ते से बाहर निकल जाएगा, और आपका कोड होना चाहिए (माना जाता है कि वे फिर से एपीआई नहीं बदलते हैं!) बस मूल एपीआई के साथ काम करें।

सबसे पहले, आपको वास्तव में अनुरोध करना होगा कि कैप्शनेटर सामग्री लोड करे। यह मेरी ट्रैक को 'प्रदर्शन मोड' को SHOWING, या 2 पर सेट किया गया है।

var video = document.getElementByID("myVideo"); 
video.textTracks[0].mode = 2; // SHOWING

वैकल्पिक रूप से, आप HIDDEN (1) के लिए एक ट्रैक की स्थिति प्रदान कर सकते हैं - जो अभी भी एक बोझ से चलाता है, और cueChange घटनाओं अभी भी आग होगा - लेकिन परदे के लिए संकेत पेंट नहीं होंगे। कैप्शनेटर में, मैं मेटाडेटा ट्रैक को बिल्कुल स्क्रीन पर पेंट नहीं करता हूं, लेकिन विकास में (बग्गी) वेबकिट एपीआई होगा।

video.textTracks[0].onload = function() { /* Your Code Here... */ }

या जब कुछ गलत हो जाता:

video.textTracks[0].onerror = function() { /* Whoah, something went wrong... */ }

एक बार सामग्री भरी हुई है, तो आप उपयोग कर सकते हैं

video.textTracks[0].mode = 1; // HIDDEN

तो फिर तुम जब संकेत भरी हुई और उपलब्ध कर रहे हैं के लिए सुनने की जरूरत है TextTrack.cues सरणी (अच्छी तरह से, तकनीकी रूप से TextTrackCueList।) लोड होने से पहले, TextTrack.cues संपत्ति null होगी।

var myCueText = video.textTracks[0].cues[0].text;

पता है कि Captionator जब ट्रैक तरह metadata है, सिवाय इसके क्यू पाठ हर क्यू की, पार्स करता हो - तो आप सही ट्रैक तरह आवंटित करता है। आप डेटा या टैग के साथ समाप्त हो सकते हैं कैप्शनेटर सोचता है कि 'अमान्य' फेंक दिया जा रहा है। आप processCueHTML विकल्प false पर सेट करके, नियमित संकेतों के लिए भी इस चेक को बंद कर सकते हैं।बहुत त्वरित सजगता के साथ

<div> <p id="metadataText">Metadata text should appear here</p> <input type='button' onclick='changeText()' value='Click here to display the metadata text' id="changetext" disabled /> </div> <video controls autobuffer id="videoTest" width="512" height="288">   <track label="Metadata Track" kind="metadata" src="metadata.vtt" type="text/webvtt" srclang="en" /> </video>  <script type="text/javascript" src="captionator.js"></script> <script type="text/javascript"> document.addEventListener("readystatechange",function(event) { if (document.readyState === "complete") { captionator.captionify(); document.querySelectorAll("#changetext")[0].removeAttribute("disabled"); } },false); function changeText() { // Get the metadataText paragraph var textOutput = document.querySelectorAll("#metadataText")[0]; // Get the metadata text track var metadataTrack = document.querySelectorAll("video")[0].textTracks[0]; if (metadataTrack.readyState === captionator.TextTrack.LOADED) { // The cue is already ready to be displayed! textOutput.innerHTML = metadataTrack.cues[0].text; } else { // We check to see whether we haven't already assigned the mode. if (metadataTrack.mode !== captionator.TextTrack.SHOWING) { textOutput.innerHTML = "Caption loading..."; // The file isn't loaded yet. Load it in! metadataTrack.mode = captionator.TextTrack.SHOWING; // You can use captionator.TextTrack.HIDDEN too. metadataTrack.onload = function() { textOutput.innerHTML = metadataTrack.cues[0].text; } metadataTrack.onerror = function() { textOutput.innerHTML = "Error loading caption!"; } } } } </script>

यहाँ, हम बटन अक्षम कर रहे हैं, धीमी गति से कनेक्शन वाले उपयोगकर्ताओं को रोकने (या बस किसी को:

इसे ध्यान में रखते
, यहाँ कैसे मैं अपने कोड को फिर से लिखने करेंगे !) कैप्शनेटर या मेटाडेटा ट्रैक तैयार होने से पहले इसे मारने से, और एक लोड इवेंट को सुनना - जिस बिंदु पर हम बटन को पुनः सक्षम करते हैं, और क्यू टेक्स्ट को सामान्य के रूप में पुनर्प्राप्त कर सकते हैं।

स्रोत

2012-02-22 07:16:56 Christopher

विस्तृत प्रतिक्रिया, क्रिस्टोफर के लिए आपको बहुत बहुत धन्यवाद। यह एक बड़ी मदद थी! – Steph

आप अपने मेटाडाटा लोड करने के लिए आवश्यकता हो सकती है अजाक्स और पार्स के माध्यम से वीटीटी फ़ाइल और इसे स्वयं प्रदर्शित करें।

मैंने HTML5 Doctors' article on video subtitling से example पर देखा। वे Playr का उपयोग कर रहे हैं, इसलिए मैंने इसका स्रोत कोड चेक किया है, और वे निश्चित रूप से वीटीटी फ़ाइल को असीमित रूप से अनुरोध कर रहे हैं और इसे लोड होने के बाद सामग्री को पार्स कर रहे हैं।

मैं निम्नलिखित कोड के साथ निर्दिष्ट तत्व में VTT फ़ाइल की सामग्री लोड और यह डंप करने में सक्षम था:

function changeText() { 
    var track = document.getElementById("videoTest").querySelector("track"); 
    var req_track = new XMLHttpRequest(); 
    req_track.open('GET', track.getAttribute("src")); 
    req_track.onreadystatechange = function(){ 
     if(req_track.readyState == 4 && (req_track.status == 200 || req_track.status == 0)){ 
      if(req_track.responseText != ''){ 
       document.getElementById("metadataText").innerHTML = req_track.responseText; 
      } 
     } 
    } 
    req_track.send(null); 
}

मैं Captionator से परिचित नहीं हूँ, लेकिन ऐसा लगता है कि यह कुछ क्षमता है कुछ प्रकार की डेटा संरचना में वीटीटी फाइलों को पार्स करने के लिए, भले ही यह metadata ट्रैक प्रकार का समर्थन न करे। शायद आप इस कोड और कैप्शनेटर के मौजूदा वीटीटी पार्सर के संयोजन का उपयोग कर सकते हैं?

स्रोत

2012-02-21 01:25:34 Brandan

मदद के लिए धन्यवाद, आपका कोड मेरे लिए काम किया। मुझे लगता है कि यह वेबवीटीटी और पॉलीफिल का उपयोग करने के उद्देश्य को हरा देता है, लेकिन मुझे लगता है कि इस समय वास्तव में कोई अच्छा समाधान नहीं है क्योंकि किसी ने अभी तक 'मेटाडाटा' ' 'के लिए समर्थन लागू नहीं किया है। – Steph

ऐसा लगता है कि। यदि आप कुछ अच्छे के साथ आते हैं, तो आप हमेशा इसे कैप्शनेटर में योगदान दे सकते हैं। – Brandan

@Steph मैं आपको आश्वस्त कर सकता हूं कि कैप्शनेटर वास्तव में 'मेटाडाटा' ट्रैक प्रकार का समर्थन करता है। :) – Christopher

उत्तर

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