html5 - videojs 风格判断
高洛峰
高洛峰 2017-04-17 14:17:46
0
1
582

如题,请教各位一下,我用videojs播放视频的时候,同一个代码在不同的页面上渲染的效果不一样,这是根据哪些来判断了呢?如何统一?
先谢谢了~

ps:例子

源代码:

<video id="video-detail-<?php $detail['id'];?>" class="video-js vjs-playing vjs-fullscreen" preload="auto" poster="<?=$detail['media_serial'][0]['cu'] . ($detail['media_serial'][0]['pr'] < 1 ? '!V2' : '!V1');?>" data-setup='' webkit-playsinline>
 <source src="<?=$detail['media_serial'][0]['u'];?>" type='video/mp4'/>
</video>

正常渲染和想要的结果是:

<video id="my-video-276364" class="video-js vjs-playing vjs-fullscreen" controls="" preload="none" poster="http://*.com/uploads/moment/201611/02/video/66364de78000ef440c93963af77c8d3d.mp4.jpg!V1" webkit-playsinline=""><source src="http://*.com/uploads/moment/201611/02/video/66364de78000ef440c93963af77c8d3d.mp4" type="video/mp4"></video>

但是有些页面则会渲染成:

<p webkit-playsinline="" data-setup="" poster="http://*.com/uploads/moment/201611/02/video/66364de78000ef440c93963af77c8d3d.mp4.jpg!V1" preload="auto" class="video-js vjs-playing vjs-fullscreen vjs-paused vjs-controls-disabled vjs-workinghover video-detail--dimensions vjs-user-inactive" id="video-detail-" role="region" aria-label="video player">
    <video id="video-detail-_html5_api" class="vjs-tech" preload="auto" poster="http://*.com/uploads/moment/201611/02/video/66364de78000ef440c93963af77c8d3d.mp4.jpg!V1" data-setup="" webkit-playsinline="">
         <source src="http://*.com/uploads/moment/201611/02/video/66364de78000ef440c93963af77c8d3d.mp4" type="video/mp4">
    </video><p></p><p class="vjs-poster" tabindex="-1" style="background-image: url(&quot;http://*.com/uploads/moment/201611/02/video/66364de78000ef440c93963af77c8d3d.mp4.jpg!V1&quot;);"></p><p class="vjs-text-track-display vjs-hidden" aria-live="assertive" aria-atomic="true"></p><p class="vjs-loading-spinner" dir="ltr"></p><button class="vjs-big-play-button" type="button" aria-live="polite"><span class="vjs-control-text">Play Video</span></button><p class="vjs-control-bar" dir="ltr" role="group"><button class="vjs-play-control vjs-control vjs-button " type="button" aria-live="polite"><span class="vjs-control-text">Play</span></button><p 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"><p class="vjs-menu"><p class="vjs-menu-content"><p 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%"><p class="vjs-volume-level"><span class="vjs-control-text"></span></p></p></p></p><span class="vjs-control-text">Mute</span></p><p class="vjs-current-time vjs-time-control vjs-control"><p class="vjs-current-time-display" aria-live="off"><span class="vjs-control-text">Current Time </span>0:00</p></p><p class="vjs-time-control vjs-time-pider"><p><span>/</span></p></p><p class="vjs-duration vjs-time-control vjs-control"><p class="vjs-duration-display" aria-live="off"><span class="vjs-control-text">Duration Time</span> 0:57</p></p><p class="vjs-progress-control vjs-control"><p tabindex="0" class="vjs-progress-holder vjs-slider vjs-slider-horizontal" role="slider" aria-valuenow="NaN" aria-valuemin="0" aria-valuemax="100" aria-label="progress bar" aria-valuetext="0:00"><p class="vjs-load-progress" style="width: 0.405512%;"><span class="vjs-control-text" style="left: 20%; width: 80%;"><span>Loaded</span>: 0%</span></p><p class="vjs-mouse-display" data-current-time="0:00" style="left: 0px;"></p><p class="vjs-play-progress vjs-slider-bar" data-current-time="0:00"><span class="vjs-control-text"><span>Progress</span>: 0%</span></p></p></p><p class="vjs-live-control vjs-control vjs-hidden"><p class="vjs-live-display" aria-live="off"><span class="vjs-control-text">Stream Type</span>LIVE</p></p><p class="vjs-remaining-time vjs-time-control vjs-control"><p class="vjs-remaining-time-display" aria-live="off"><span class="vjs-control-text">Remaining Time</span> -0:00</p></p><p class="vjs-custom-control-spacer vjs-spacer ">&nbsp;</p><p 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"><p class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"></ul></p><span class="vjs-control-text">Playback Rate</span><p class="vjs-playback-rate-value">1</p></p><p 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"><p class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"><li class="vjs-menu-title" tabindex="-1">Chapters</li></ul></p><span class="vjs-control-text">Chapters</span></p><p 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"><p 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></p><span class="vjs-control-text">Descriptions</span></p><p 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"><p 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></p><span class="vjs-control-text">Subtitles</span></p><p 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"><p 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></p><span class="vjs-control-text">Captions</span></p><p 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"><p class="vjs-menu" role="presentation"><ul class="vjs-menu-content" role="menu"></ul></p><span class="vjs-control-text"></span></p><button class="vjs-fullscreen-control vjs-control vjs-button " type="button" aria-live="polite"><span class="vjs-control-text">Fullscreen</span></button></p><p class="vjs-error-display vjs-modal-dialog vjs-hidden " tabindex="-1" aria-describedby="video-detail-_component_332_description" aria-hidden="true" aria-label="Modal Window" role="dialog"><p class="vjs-modal-dialog-description vjs-offscreen" id="video-detail-_component_332_description">This is a modal window.</p><p class="vjs-modal-dialog-content" role="document"></p></p><p class="vjs-caption-settings vjs-modal-overlay vjs-hidden"><p class="vjs-tracksettings">
      <p class="vjs-tracksettings-colors">
        <p 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>
        </p> <!-- vjs-fg-color -->
        <p 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>
        </p> <!-- vjs-bg-color -->
        <p 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>
        </p> <!-- vjs-window-color -->
      </p> <!-- vjs-tracksettings -->
      <p class="vjs-tracksettings-font">
        <p 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>
        </p> <!-- vjs-font-percent -->
        <p 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>
        </p> <!-- vjs-edge-style -->
        <p 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>
        </p> <!-- vjs-font-family -->
      </p>
    </p>
    <p class="vjs-tracksettings-controls">
      <button class="vjs-default-button">Defaults</button>
      <button class="vjs-done-button">Done</button>
    </p></p></p>
高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

reply all(1)
伊谢尔伦

Waiting for God’s answer

Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!