HTML5 Video Tag – Strange Behavior of SharePoint 2013

In the recent requirement, I came across a strange behavior of SharePoint 2013 over the HTML5 Video Tag. Actually the requirement was like, I need to add a HTML Video Tag on my Content Site, Publishing Page, and when the crawl happens, and I tried to display it inside a Catalogue Item Reuse WebPart. At that time, what happens, the Video Tag Renders Properly. But with out the Controls Attribute.

The default syntax which I used to upload the video tag is as follows.

 <video width="400" controls>
   <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    
   Your browser does not support HTML5 video.
 </video>
 

But actually when rendering in the Publishing Side, it renders like

 <video width="400" >
   <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
    
   Your browser does not support HTML5 video.
 </video>
 

The only difference is the controls attribute.

After some investigation I came up with a work around. Added a Script Editor WebPart on the Page and added the below script to that.

 <script>
 "use strict"; 
 
 $(document).ready(function(){
 
 var arraysOfIds = $('#MyDIV video').map(function () {
 
                 
 this.setAttribute("controls", "true");
 
             }).get();
    
    
 });
 
 </script>
 

Actually the implementation is like, I am allowing the SharePoint to render all its content and I am searching for the Video tag within myDiv and adding the Attribute Controls to that. Though it looks very small piece, but it consumed couple of hours for me to identify the solution/workaround. I would not say this as a complete solution. But hope this helps.

Happy Coding,

Sathish Nadarajan.