Share experience : looping MP4 videos stored on your Web server

  • 2
  • Idea
  • Updated 3 years ago
  • Not Planned
For my company, I'm investigating a very (very) easy way to braodcap videos on RiseVision even without the need for the video creator to put hand on RiseVsion. My idea is to allow the video creator to drop videos on an internal network drive and to get such videos playing in a loop on Signage. 

I'm not a programmer and the programmers I could rely on are all busy. So, I tried to do something by myself. I share it here. Maybe it may help or the community will get some ideas for the limitations I've.

The principle is that I created a Windows network drive linked to a ./videos folder under a Microsoft IIS server. The video creator can drop the MP4 videos on that folder. The constraint is that the videos must be named video1;mp4, video2.mp4, ..... (I'm not good enough to generate a server side code enumerating the filenames). I then created the Web page with a Javascript that loops the content and play one after the other (copy here after). Web page must be saved at the level of the videos folder.

On RiseVision, I just created a presentation page with an URL item specifying the URL of the web page.

It works very well like a charm. But I remains the following issues :
  • I check on-line if the video is present. This means that it is not working full off-line.
    If I don't check on-line for the existence of the file, a video removed from the server can still be seen on the client and ran from the cache
  • My main problem .... about cache management ...
    If video are updated on the file server keeping the same name, the HTML code ran by the client does not detect it and does not flush the new version. So, the cached version is played instead. 
    For instance, I 've video1.mp4, video2.mp4 and video3.mp4. All of them are playing. I decide now to override video1.mp4 with a new version. The browser rendering the HTML file does not detect it and plays from the cache the previous version unless a stop/restart of the RiseVison player is done.  
Thanks for any comment.


Here is the code of the Web page that must be beside the videos folder where the videos are stored.

<html>
<head> <style> html, body { margin: 0; padding: 0;} #wrapper { } #video-container { overflow: hidden; width: 100%;} #video-container video { display: block; width: 100%; } </style> </head> <Body> <!-- Be kind with this code. I'm not a developer. There may have stupid stuff in it but at least it works as-is for me I assembled this code with copy/paste from various Internet source Goal of the HTML : - Play all videos stored in a folder (here named ./videos) in a loop one after te other. - All videos must be named video1.mp4, video2.mp4, .... . - Must be incremental. If one is missing for instance video1.mp4, video3.mp4 (video2.mp4 is missing) the script restart at video1.mp4 - Need to name video1, video2, video3, .... because I'm not good enough in Javascript to enumerate all files with any name saved in a given folder - check the existence of the file directly on the server (not perfect for full caching without network connection) The reason is to avoid running a removed video from the local cache (I experienced it) - Works perfectly well for me with the videos and this code saved on an IIS server http://mysever/loopvideo.htm and all videos saved in ./videos folder - Target for HD format (1080x720p). If you need full HD change here after - You may have to remove the video control (usefull for debugging for a fast video viewing) - Need to fix. I still have t check how to have full page without a margin --> <!-- ******** Start of code --> <!-- Remove line till next comment. Just used for displaying the video name that is played --> <!-- <div id=wrapper> Playing video <span Id="Number"></span> </div> --> <!-- end of remove --> <div id="video-container"> <video width=1920 height=1080 src="videos/video1.mp4" id="myVideo" autoplay controls> <!-- You may have to remove controls here the line before --> video not supported </video> </div> <script type='text/javascript'> var count=1; var player=document.getElementById('myVideo'); player.addEventListener('ended',myHandler,false); player.src="videos/video"+count+".mp4"; document.getElementById("Number").innerHTML = player.src ; function myHandler(e) { if(!e) { e = window.event; } count++; // if ( count > 1 ) { count=1; location.reload(); } ; player.src="videos/video"+count+".mp4"; if (! doesFileExist(player.src) ) {count=1; location.reload();} else { document.getElementById("Number").innerHTML = player.src ;} } function doesFileExist(urlToFile) { var xhr = new XMLHttpRequest(); xhr.open('HEAD', urlToFile, false); xhr.send(); if (xhr.status != "200") { // may have to be more precise about checking existance. // Not so optimal in full off-line mode because checking for new video is done // on-line using an HTTP head // Reason of that is that checking on-line prevents running a video deleted from // the server but still in local cache (I experienced it). return false; } else { return true;} } </script> </body> </html>
 
 
Photo of Thierry Masson

Thierry Masson, Champion

  • 2,356 Points 2k badge 2x thumb

Posted 3 years ago

  • 2
Photo of Blake Freeman

Blake Freeman, Official Rep

  • 36,116 Points 20k badge 2x thumb
Official Response
Thierry,

It looks like this idea can be implemented with some custom code on the user's end. Since that's the case, I'm going to mark this as not planned on our part, but we would love to hear experiences of other users solutions.