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-13 15:58:47Z

23

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, 2019 at 15:58

answered Feb 2, 2016 at 11:20

misterben

7,9132 gold badges30 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Mark Moonie Griffiths Over a year ago

unfortunately that did not work the way i call the change (i have edited the question to include it.)

misterben Over a year ago

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.

Mark Moonie Griffiths Over a year ago

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 Over a year ago

Do i have to refresh the player when a new source is added?

misterben Over a year ago

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.

|

TourEiffel · Accepted Answer · 2021-12-15 12:59:35Z

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>
     </>

}

Collectives™ on Stack Overflow

Video Js loading source dynamically

2 Answers 2

6 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Linked

Related