2

I would like to be able to dynamically embed videos from a source into an html page. For example, if I wanted to add a new video to my page I would simply just have to place it in a folder and have it automatically be embedded in my html page. I would like (if possible) to do this using JavaScript and jQuery. Can someone point me in the right direction?

Trevor D.
  • 33
  • 7
  • Would this only be on your end or should the video get saved to your server? – Luca Kiebel Jun 15 '17 at 14:40
  • So eventually the idea is to access the videos from a database and have them upload to an internal resource here at the company I intern for. Ideally my boss would like to place the videos on the database and have them upload automatically to our "Help" page on our site. – Trevor D. Jun 15 '17 at 14:43

1 Answers1

0

It has to be done like this:

  1. Scan the folder
  2. Look for the correct extension

  3. Append videos to the page

    var folder = "videos/";

$.ajax({
    url : folder,
        success: function (data) {
            $(data).find("a").attr("href", function (i, val) {
            if( val.match(/\.(mp4)$/) ) { 
                $("body").append( "
                    <video width="320" height="240" autoplay>
                        <source src='"+ folder + val +"' type="video/mp4">
                    </video>
                " );
            } 
        });
    }
});

Idea taken from https://stackoverflow.com/a/32940532/7117409

YamneZ
  • 120
  • 9
  • Thank you! Looks like that definitely set me on the right track. Now my console is throwing XMLHttpRequest error. "Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https." Probably because I'm testing on a separate test .html file I created? I'll look into it more. – Trevor D. Jun 15 '17 at 15:16
  • Because you're on local. It has to be on a web server, even localhost. – YamneZ Jun 15 '17 at 15:19
  • That's what I was assuming. Thank you! – Trevor D. Jun 15 '17 at 15:20