Search code examples
javascripthtmlvideovideo.js

How can I copy the input content to webpage source for HTML5 video player?


Hy!
I working on a video player, and I would like to make a preview secticon for player.
Looks like this:

<input type="url" ontype="" id="videourl" placeholder="Give the mp4 URL here">
<input type="url" ontype="" id="video poster" placeholder="Give here the video poster" >

And here come the video player which based on video.js.


You see the "ontype" section.
Here comes the functions, which can show the player for user.
And if you typed correctly datas, the player work and you get the video poster and the video (and of course you can play).

The player strukture:

<video id="vid3" controls preload="none" poster="Here come the input value" class="video-js vjs-default-skin" data-setup='{ "techOrder": ["flash"] }'>
    <source src="Here come the input value" id="iframe_field" type='video/mp4'>
</video>

Solution

  • Try this HTML:

    <input type="url" id="videourl" placeholder="Give the mp4 URL here" value="">
    <input type="url" id="videoposter" placeholder="Give here the video poster" value="">
    <button onclick="reload();">Load Video</button>
    
    <video id="vid3" controls preload="none" poster="" class="video-js vjs-default-skin">
        <source src="" id="iframe_field" type='video/mp4'>
    </video>
    

    ...and this JS:

    function reload() {
        var videourl = $('#videourl')[0].value;
        var videoposter = $('#videoposter')[0].value;
        $('#vid3').attr('poster', videoposter);
        $('#vid3').attr('src', videourl);
        videojs("vid3", {}, function(){
            this.load();
        });
    }
    

    (jQuery and video.js required.)

    Jsbin demo.

    Does the above do what you want? I don't know what the "ontype" attribute in the input elements is for.