Overwriting video.js code


#1

I have a page with videos embedded using the <video> tag and video.js formatting. When the client loads the page in Surreal to edit text and saves it re-writes the video tag making the video no longer work on the page. The javascript of the code that is written on page load seems to be picked up by the editor and permanently written in place of the code that is supposed to be on the page.

Is there a “no edit” class or something that I can wrap around code that I don’t want to be touched on the page?

Example:

This is the code on the page:

<div id="vidcontainer" class="col-third pad-right">
<video id="vidplayer3" width="auto" height="auto" class="video-js vjs-default-skin" controls preload="none"  data-setup="{}" poster="media/CSS_Philippines.jpg">
<source src="media/CSS_Philippines.mp4" type="video/mp4">
</video>
</div>

This is what it is changed to on save in the editor:

<div id="vidcontainer" class="col-third pad-right">
<div id="vidplayer3" class="video-js vjs-default-skin vjs-paused vjs-controls-enabled" data-setup="{}">
<div data-embed="true"><video id="vidplayer3_html5_api" class="vjs-tech" preload="none" data-setup="{}" poster="media/CSS_Philippines.jpg" src="media/CSS_Philippines.mp4">
<source src="media/CSS_Philippines.mp4" type="video/mp4">
</video>
</div>
<div>&nbsp;</div>
<div class="vjs-poster" style="background-image: url('media/CSS_Philippines.jpg');" tabindex="-1">&nbsp;</div>
<div class="vjs-text-track-display">&nbsp;</div>
<div class="vjs-loading-spinner">&nbsp;</div>
<div class="vjs-big-play-button" tabindex="0">&nbsp;</div>
<div class="vjs-control-bar">
<div class="vjs-play-control vjs-control " tabindex="0">
<div class="vjs-control-content"><span class="vjs-control-text">Play</span></div>
</div>
<div class="vjs-current-time vjs-time-controls vjs-control">
<div class="vjs-current-time-display"><span class="vjs-control-text">Current Time </span>0:00</div>
</div>
<div class="vjs-time-divider">
<div>/</div>
</div>
<div class="vjs-duration vjs-time-controls vjs-control">
<div class="vjs-duration-display"><span class="vjs-control-text">Duration Time</span> 0:00</div>
</div>
<div class="vjs-remaining-time vjs-time-controls vjs-control">
<div class="vjs-remaining-time-display"><span class="vjs-control-text">Remaining Time</span> -0:00</div>
</div>
<div class="vjs-live-controls vjs-control">
<div class="vjs-live-display"><span class="vjs-control-text">Stream Type</span>LIVE</div>
</div>
<div class="vjs-progress-control vjs-control">
<div class="vjs-progress-holder vjs-slider" tabindex="0">
<div class="vjs-load-progress"><span class="vjs-control-text">Loaded: 0%</span></div>
<div class="vjs-play-progress"><span class="vjs-control-text">Progress: 0%</span></div>
<div class="vjs-seek-handle vjs-slider-handle"><span class="vjs-control-text">00:00</span></div>
</div>
</div>
<div class="vjs-fullscreen-control vjs-control " tabindex="0">
<div class="vjs-control-content"><span class="vjs-control-text">Fullscreen</span></div>
</div>
<div class="vjs-volume-control vjs-control">
<div class="vjs-volume-bar vjs-slider" tabindex="0">
<div class="vjs-volume-level">&nbsp;</div>
<div class="vjs-volume-handle vjs-slider-handle"><span class="vjs-control-text">00:00</span></div>
</div>
</div>
<div class="vjs-mute-control vjs-control" tabindex="0">
<div><span class="vjs-control-text">Mute</span></div>
</div>
<div class="vjs-playback-rate vjs-menu-button vjs-control vjs-hidden">
<div class="vjs-control-content"><span class="vjs-control-text">Playback Rate</span></div>
<div class="vjs-playback-rate-value">1</div>
<div class="vjs-menu">&nbsp;</div>
</div>
<div class="vjs-subtitles-button vjs-menu-button vjs-control " style="display: none;" tabindex="0">
<div class="vjs-control-content"><span class="vjs-control-text">Subtitles</span>
<div class="vjs-menu">
<ul class="vjs-menu-content">
<li class="vjs-menu-item vjs-selected" tabindex="0">subtitles off</li>
</ul>
</div>
</div>
</div>
<div class="vjs-captions-button vjs-menu-button vjs-control " style="display: none;" tabindex="0">
<div class="vjs-control-content"><span class="vjs-control-text">Captions</span>
<div class="vjs-menu">
<ul class="vjs-menu-content">
<li class="vjs-menu-item vjs-selected" tabindex="0">captions off</li>
</ul>
</div>
</div>
</div>
<div class="vjs-chapters-button vjs-menu-button vjs-control " style="display: none;" tabindex="0">
<div class="vjs-control-content"><span class="vjs-control-text">Chapters</span>
<div class="vjs-menu">
<ul class="vjs-menu-content">
<li class="vjs-menu-title">Chapters</li>
</ul>
</div>
</div>
</div>
</div>
<div class="vjs-error-display">&nbsp;</div>
</div>
</div>

#2

Looks like you need to disable video.js in the editor. When the page loads and video.js initializes, it’s updating the video markup and adding those controls. Then, when you save the page, those changes get written as well.

This page describes a few methods to detect the CMS. The easiest is probably this:

if(!window.isCMS) {
  //
  // Initialize video.js here
  //
}

#3

I should also mention that video hosting is hard to get right between users, browser support, and devices. It’s almost always better to use a video hosting service (e.g. YouTube, Vimeo, etc.) to embed videos. By using one, you’ll also get useful analytics and reduce the bandwidth on your server :slight_smile:


#4

<!--cms-disable--> is exactly the kind of thing I was looking for. I tried it out and it worked great for the first instance I used it. Then when I wrapped other areas on the page the content between the comments was deleted for all but the first instance of <!--cms-disable--> I used. Can you only use it once per page?


#5

I decided to load the js file with the condition you suggested like:

<script> if(!window.isCMS){ var d = document, h = d.getElementsByTagName('head')[0], s = d.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = 'video-js/video-4-11-1.js'; h.appendChild(s); } </script>


#6

That is doing the trick. Thanks.