1

自分のビデオでクローズド キャプションを動作させることができません。それを動作させるために必要なコードがたくさんあると確信していますが、何が欠けているのかわかりません。本文にもメッセージが表示されます。ここでは、data-begin と data-end に下線が引かれていることを示しており、属性 data-begin が要素スパンの有効な属性ではないことを示しています。問題があり、別のタグを使用する必要があるかもしれませんが、それでも機能します。私はhtmlにかなり慣れていません。これが私のすべてのコードです

ありがとう

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <link type="text/css" href="skin/jplayer.blue.monday.css" rel="stylesheet" />
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>

    <script type="text/javascript" src="javascripts/jquery.jplayer.min.js"></script>
   <script type="text/javascript">
       $(document).ready(function () {
           $("#jquery_jplayer_1").jPlayer({
               ready: function () {
                   $(this).jPlayer("setMedia", {
                       m4v: "videos/sequence01mp4video.mp4",
                       poster: "http://www.jplayer.org/video/poster/Big_Buck_Bunny_Trailer_480x270.png"
                   });
               },
               swfPath: "/javascripts",
              supplied: "m4v"
           });
       });
       (function (_global) {
           var captions = [];
           var video;
           var output;
           var caplen;

           window.addEventListener('load', function () {
               output = document.createElement('div'); // JS is enabled, so insert a div to put the captions into
               output.id = 'caption'; // it has an id of caption
               video = document.querySelector('video'); // and it's after the first video element
               video.parentNode.insertBefore(output, video.nextSibling);
               getCaptions();
               video.addEventListener('timeupdate', timeupdate, false);
           }, false);

           // function to populate the 'captions' array
           function getCaptions() {
               captions = []; // empty the captions array
               var nodes = document.querySelectorAll('#transcript span');
               var node = "";
               var caption = "";
               for (var i = 0, node; node = nodes[i]; i++) {
                   caption = {
                       'start': parseFloat(node.getAttribute('data-begin')), // get start time
                       'end': parseFloat(node.getAttribute('data-end')), // get end time
                       'text': node.textContent
                   };
                   captions.push(caption); // and all the captions into an array
               }
               caplen = captions.length;
           }

           function timeupdate() {
               var now = video.currentTime; // how soon is now?
               var text = "", cap = "";
               for (var i = 0; i < caplen; i++) {
                   cap = captions[i];
                   if (now >= cap.start && now <= cap.end) { // is now within the times specified for this caption?
                       text = cap.text; // yes? then load it into a variable called text
                       break;
                   }
               }
               output.innerHTML = text; // and put contents of text into caption div
           }

           // hide transcript div when scripting is enabled
           document.write('<style>#transcript{display:none}</style>');
       })(this);

   </script>

</head>
<body>
  <div id="jp_container_1" class="jp-video ">
    <div class="jp-type-single">
      <div id="jquery_jplayer_1" class="jp-jplayer"></div>
      <div class="jp-gui">
        <div class="jp-video-play">
          <a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
        </div>
          <div id="transcript">
         <span data-begin="0:00:00.380" data-end="0:00:03.670">hello, my name is rob carson environmental engineer with the</span>
         <span data-begin="0:00:03.670" data-end="0:00:06.880">hello, my name is rob carson environmental engineer with the.</span>
           </div>
        <div class="jp-interface">
          <div class="jp-progress">
            <div class="jp-seek-bar">
              <div class="jp-play-bar"></div>
            </div>
          </div>
          <div class="jp-current-time"></div>
          <div class="jp-duration"></div>
          <div class="jp-controls-holder">
            <ul class="jp-controls">
              <li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
              <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
              <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
              <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
              <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
              <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
            </ul>
            <div class="jp-volume-bar">
              <div class="jp-volume-bar-value"></div>
            </div>
            <ul class="jp-toggles">
              <li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
              <li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
              <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
              <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
            </ul>
          </div>
          <div class="jp-title">
            <ul>
              <li>Big Buck Bunny Trailer</li>
            </ul>
          </div>
        </div>
      </div>
      <div class="jp-no-solution">
        <span>Update Required</span>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
      </div>
    </div>
  </div>
</body>
</html>
4

0 に答える 0