Video Js loading source dynamically

Question

Hi I have an application which has a grid and a js video player. Currently I am populating the grid with data from a SQL database, I have a function call when ever a row is clicked which calls a stored procedure and returns a url i then use that url to change the source change the source. The funny thing is with a basic html 5 video player the code i have works fine but doesn't work for Video JS

My code -

function changesource(url) {

    var video = $("#vid1");
    video.src = url;
    document.getElementById('vid1').src = url;


 }
// calls the function for browse 
function getBrowseData() {
$.ajax({
    type: "post",
    data: JSON.stringify({
        archive_header_Key: testdata,
    }),
    url: "/Search.aspx/GetBrowseData",
    dataType: "json",
    contentType: "application/json",
    success: function (object) {
        response(object);
    },
    complete: function (object) {

    },
    error: function (object) {
    }
});
function response(object) {

        var obj = (object.d[0]["browse_file"]);

    var slashReplace = obj.replace(/\\/g, "/");
    var slashFinal = slashReplace.substring(10);
    var browsevalue = GetValue("BrowseServer");
    var slashfinal = "http://" + browsevalue + ":5060" + slashFinal;
    Location = slashfinal;
    $('#p1').text(slashfinal);     


    changesource(slashfinal);
}

}

var Video = ("<video id='vid1' class='video-js vjs-default-skin' controls  preload='none' width='640' height='264' data-setup='{}'><source src=" + Location + "  type='video/mp4'/></video>   <script>var options = { hidden: false }, mplayer = videojs('vid1'); mplayer.rangeslider(options); mplayer.showSlider();</script>");

Any help would be appreciated

misterben · Accepted Answer · 2019-05-13T15:58:47.097

20

If you're using video.js you need to use its API to set the source. The HTML5 video API does not work as once the video.js player is initialised the element with the id vid is not a video element.

var video = videojs("vid1");
video.src(url);

Video.js will infer the type of video for a few file extensions, but it's better to include the type:

video.src({
  type: 'video/mp4',
  src: 'https://example.com/myvideo.mp4'
});

edited May 13 '19 at 15:58

answered Feb 02 '16 at 11:20

misterben

7,455
2
26
47

unfortunately that did not work the way i call the change (i have edited the question to include it.) – Mark Moonie Griffiths Feb 02 '16 at 11:28
The code about would replace what you currently have in `changesource(url)`. How you originally added the video element to the DOM makes no difference. – misterben Feb 02 '16 at 11:35
Hi So i chnaged the function to function changesource(url) { var video = videojs("#vid1"); video.src(url); } But all i get oin the video player is no compatible source was found for this video. but when i put the link in directly it works. I have also checked its getting the right source and it is. – Mark Moonie Griffiths Feb 02 '16 at 12:11
Do i have to refresh the player when a new source is added? – Mark Moonie Griffiths Feb 02 '16 at 12:46
No # in `videojs("vid1");`. You do not need to re-create a player to change the source. videojs('player-id') creates a video.js player from a video element with the id 'player' and returns it, or just returns the player if it already exists. – misterben Feb 02 '16 at 14:15
I figured out what my problem was i was not setting a source to start with so it was throwing an error. once i set an initial source it works fine. Thank you for your help. – Mark Moonie Griffiths Feb 03 '16 at 11:58

score 0 · Answer 2 · edited Dec 15 '21 at 12:59

if you are using react functional component with video js , then you have to access the video tag by using useRef Hook, like this

{



import {useRef} from 'react';
         const videoRef=useRef();

useEffect(()=>{
videoRef.current.src=DYNAMIC_DATA_URL
})

         return <>
         <video
             id={state.video.id}
             className="video-js vjs-big-play-centered"
             width="800"
             height="482"
             controls
             autoPlay={true}
             preload="auto"
             poster={state.video.thumb}
             data-setup="{}"
             ref={videoRef}
         >

             <source src={a} type="video/mp4"></source>

         </video>
     </>

}

Video Js loading source dynamically

2 Answers2

Linked