如何将 video.js 应用于动态生成的视频元素？

Question

我想知道 video.js javascript 如何改变 html 视频标签的属性。例如，当我尝试此代码时：

                <video id="last" class="video-js vjs-default-skin" controls
                       preload="metadata"
                       poster="http://video-js.zencoder.com/oceans-clip.png"
                       data-setup='{ "fluid": true }'>
                    <source src='../videos/P04A.mp4' type='video/mp4'>
                    <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm'>
                </video>

然后检查它我得到：

<div data-setup="{ &quot;fluid&quot;: true }" poster="http://video-js.zencoder.com/oceans-clip.png" preload="metadata" class="video-js vjs-default-skin vjs-fluid vjs-controls-enabled vjs-workinghover last-dimensions vjs-has-started vjs-paused vjs-user-inactive" id="last" role="region" aria-label="video player"><video id="last_html5_api" class="vjs-tech" preload="metadata" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{ &quot;fluid&quot;: true }" src="../videos/P04A.mp4">
                    <source src="../videos/P04A.mp4" type="video/mp4">
                    <source src="http://video-js.zencoder.com/oceans-clip.webm" type="video/webm">
                </video><div></div><div class="vjs-poster" tabindex="-1" style="background-image: url(&quot;http://video-js.zencoder.com/oceans-clip.png&quot;);"></div><div class="vjs-text-track-display vjs-hidden" aria-live="assertive" aria-atomic="true"></div><div class="vjs-loading-spinner" dir="ltr"></div><button class="vjs-big-play-button" type="button" aria-live="polite"><span class="vjs-control-text">Play Video</span></button><div class="vjs-control-bar" dir="ltr" role="group"><button class="vjs-play-control vjs-control vjs-button vjs-paused" type="button" aria-live="polite"><span class="vjs-control-text">Play</span></button><div class="vjs-volume-menu-button vjs-menu-button vjs-menu-button-inline vjs-control vjs-button  vjs-volume-menu-button-horizontal vjs-vol-3" tabindex="0" role="button" aria-live="polite"><div class="vjs-menu"><div class="vjs-menu-content"><div tabindex="0" class="vjs-volume-bar vjs-slider-bar vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="100.00" aria-valuemin="0" aria-valuemax="100" aria-label="volume level" aria-valuetext="100.00%"><div class="vjs-volume-level"><span class="vjs-control-text"></span></div></div></div></div><span class="vjs-control-text">Mute</span></div><div class="vjs-current-time vjs-time-control vjs-control"><div class="vjs-current-time-display" aria-live="off"><span class="vjs-control-text">Current Time</span> 0:00</div></div><div class="vjs-time-control vjs-time-divider"><div><span>/</span></div></div><div class="vjs-duration vjs-time-control vjs-control"><div class="vjs-duration-display" aria-live="off"><span class="vjs-control-text">Duration Time</span> 1:00</div></div><div class="vjs-progress-control vjs-control"><div tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="0.00" aria-valuemin="0" aria-valuemax="100" aria-label="progress bar" aria-valuetext="0:00"><div class="vjs-load-progress" style="width: 100%;"><span class="vjs-control-text" style="left: 0%; width: 100%;"><span>Loaded</span>: 0%</span></div><div class="vjs-mouse-display" data-current-time="0:00" style="left: -4px;"></div><div class="vjs-play-progress vjs-slider-bar" data-current-time="0:00" style="width: 0%;"><span class="vjs-control-text"><span>Progress</span>: 0%</span></div></div></div><div class="vjs-live-control vjs-control vjs-hidden"><div class="vjs-live-display" aria-live="off"><span class="vjs-control-text">Stream Type</span>LIVE</div></div><div class="vjs-remaining-time vjs-time-control vjs-control"><div class="vjs-remaining-time-display" aria-live="off"><span class="vjs-control-text">Remaining Time</span> -1:00</div></div><div class="vjs-custom-control-spacer vjs-spacer ">&nbsp;</div><div class="vjs-playback-rate vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"></ul></div><span class="vjs-control-text">Playback Rate</span><div class="vjs-playback-rate-value">1</div></div><div class="vjs-chapters-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true" aria-label="Chapters Menu"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-title" tabindex="-1">Chapters</li></ul></div><span class="vjs-control-text">Chapters</span></div><div class="vjs-descriptions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true" aria-label="Descriptions Menu"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-checked="true">descriptions off<span class="vjs-control-text">, selected</span></li></ul></div><span class="vjs-control-text">Descriptions</span></div><div class="vjs-subtitles-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true" aria-label="Subtitles Menu"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-checked="true">subtitles off<span class="vjs-control-text">, selected</span></li></ul></div><span class="vjs-control-text">Subtitles</span></div><div class="vjs-captions-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true" aria-label="Captions Menu"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-item vjs-selected" tabindex="-1" role="menuitemcheckbox" aria-live="polite" aria-checked="true">captions off<span class="vjs-control-text">, selected</span></li></ul></div><span class="vjs-control-text">Captions</span></div><div class="vjs-audio-button vjs-menu-button vjs-menu-button-popup vjs-control vjs-button vjs-hidden" tabindex="0" role="menuitem" aria-live="polite" aria-expanded="false" aria-haspopup="true" aria-label="Audio Menu"><div class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"></ul></div><span class="vjs-control-text"></span></div><button class="vjs-fullscreen-control vjs-control vjs-button " type="button" aria-live="polite"><span class="vjs-control-text">Fullscreen</span></button></div><div class="vjs-error-display vjs-modal-dialog vjs-hidden " tabindex="-1" aria-describedby="last_component_336_description" aria-hidden="true" aria-label="Modal Window" role="dialog"><p class="vjs-modal-dialog-description vjs-offscreen" id="last_component_336_description">This is a modal window.</p><div class="vjs-modal-dialog-content" role="document"></div></div><div class="vjs-caption-settings vjs-modal-overlay vjs-hidden"><div class="vjs-tracksettings">
  <div class="vjs-tracksettings-colors">
    <div class="vjs-fg-color vjs-tracksetting">
        <label class="vjs-label">Foreground</label>
        <select>
          <option value="">---</option>
          <option value="#FFF">White</option>
          <option value="#000">Black</option>
          <option value="#F00">Red</option>
          <option value="#0F0">Green</option>
          <option value="#00F">Blue</option>
          <option value="#FF0">Yellow</option>
          <option value="#F0F">Magenta</option>
          <option value="#0FF">Cyan</option>
        </select>
        <span class="vjs-text-opacity vjs-opacity">
          <select>
            <option value="">---</option>
            <option value="1">Opaque</option>
            <option value="0.5">Semi-Opaque</option>
          </select>
        </span>
    </div> <!-- vjs-fg-color -->
    <div class="vjs-bg-color vjs-tracksetting">
        <label class="vjs-label">Background</label>
        <select>
          <option value="">---</option>
          <option value="#FFF">White</option>
          <option value="#000">Black</option>
          <option value="#F00">Red</option>
          <option value="#0F0">Green</option>
          <option value="#00F">Blue</option>
          <option value="#FF0">Yellow</option>
          <option value="#F0F">Magenta</option>
          <option value="#0FF">Cyan</option>
        </select>
        <span class="vjs-bg-opacity vjs-opacity">
            <select>
              <option value="">---</option>
              <option value="1">Opaque</option>
              <option value="0.5">Semi-Transparent</option>
              <option value="0">Transparent</option>
            </select>
        </span>
    </div> <!-- vjs-bg-color -->
    <div class="window-color vjs-tracksetting">
        <label class="vjs-label">Window</label>
        <select>
          <option value="">---</option>
          <option value="#FFF">White</option>
          <option value="#000">Black</option>
          <option value="#F00">Red</option>
          <option value="#0F0">Green</option>
          <option value="#00F">Blue</option>
          <option value="#FF0">Yellow</option>
          <option value="#F0F">Magenta</option>
          <option value="#0FF">Cyan</option>
        </select>
        <span class="vjs-window-opacity vjs-opacity">
            <select>
              <option value="">---</option>
              <option value="1">Opaque</option>
              <option value="0.5">Semi-Transparent</option>
              <option value="0">Transparent</option>
            </select>
        </span>
    </div> <!-- vjs-window-color -->
  </div> <!-- vjs-tracksettings -->
  <div class="vjs-tracksettings-font">
    <div class="vjs-font-percent vjs-tracksetting">
      <label class="vjs-label">Font Size</label>
      <select>
        <option value="0.50">50%</option>
        <option value="0.75">75%</option>
        <option value="1.00" selected="">100%</option>
        <option value="1.25">125%</option>
        <option value="1.50">150%</option>
        <option value="1.75">175%</option>
        <option value="2.00">200%</option>
        <option value="3.00">300%</option>
        <option value="4.00">400%</option>
      </select>
    </div> <!-- vjs-font-percent -->
    <div class="vjs-edge-style vjs-tracksetting">
      <label class="vjs-label">Text Edge Style</label>
      <select>
        <option value="none">None</option>
        <option value="raised">Raised</option>
        <option value="depressed">Depressed</option>
        <option value="uniform">Uniform</option>
        <option value="dropshadow">Dropshadow</option>
      </select>
    </div> <!-- vjs-edge-style -->
    <div class="vjs-font-family vjs-tracksetting">
      <label class="vjs-label">Font Family</label>
      <select>
        <option value="">Default</option>
        <option value="monospaceSerif">Monospace Serif</option>
        <option value="proportionalSerif">Proportional Serif</option>
        <option value="monospaceSansSerif">Monospace Sans-Serif</option>
        <option value="proportionalSansSerif">Proportional Sans-Serif</option>
        <option value="casual">Casual</option>
        <option value="script">Script</option>
        <option value="small-caps">Small Caps</option>
      </select>
    </div> <!-- vjs-font-family -->
  </div>
</div>
<div class="vjs-tracksettings-controls">
  <button class="vjs-default-button">Defaults</button>
  <button class="vjs-done-button">Done</button>
</div></div></div>

问题是，当我生成与 javascript 相同的第一个 Html 时，它不会生成第二个代码。所以我想知道什么时候会发生这种情况，为什么我不能使用生成的 Html.

Answer 1

你需要做的就是把

videojs("id_of_the_video", {}, function(){
   //What you wanna do when it's initialized, you can keep this blank if not needed
 });

在 JavaScript 生成后立即删除 html 标签中的数据设置属性。

第一个参数是视频的id（确保它从未被初始化）
第二个是可选的，它是您希望在数据设置中拥有的内容
第三个是初始化时要调用的函数。

如何将 video.js 应用于动态生成的视频元素？

How to apply video.js to a dynamically generated video element?

html

javascript

video.js