html5 video tag setting src programmatically

Question

I need to run a video file for this iam using video element. The anomaly which iam seeing right now is that if iam setting the src programmatically then the file is not playing. While the same path if iam directly giving in src then the video is playing.

The Video resides in Videos folder of solution, so i dont think there is any access issues.

Below code directly assigns the src for video - Playing the file.

  function ShowModalPopup() {
    //$find("mpe").show();
    //return false;
    var param1 = new Date();
    var month = param1.getMonth() + 1;
    var day = param1.getDate();
    var param2 = (('' + day).length < 2 ? '0' : '') + day + '/' + (('' + month).length < 2 ? '0' : '') + month + '/' + param1.getFullYear() + ' ' + param1.getHours() + ':' + param1.getMinutes() + ':' + param1.getSeconds();
    $("#<%= hdnStartDateTime.ClientID %>").val(param2);
    var url = $get("<%=lnkVideoLink.ClientID %>").value;
    alert(url);
    //$get("video").src = url;
    $('[id*="MyVdo"]').attr('src', '../../MS_RIT_Training_Videos/REITIworkatTest.mp4');//type='video/mp4'
    //$('[id*="MyVdo"]')[0].play();
    $find("mpe").show();
    return false;
}

Below code programmatically assigning src - Not Playing the video

function ShowModalPopup() {
    //$find("mpe").show();
    //return false;
    var param1 = new Date();
    var month = param1.getMonth() + 1;
    var day = param1.getDate();
    var param2 = (('' + day).length < 2 ? '0' : '') + day + '/' + (('' + month).length < 2 ? '0' : '') + month + '/' + param1.getFullYear() + ' ' + param1.getHours() + ':' + param1.getMinutes() + ':' + param1.getSeconds();
    $("#<%= hdnStartDateTime.ClientID %>").val(param2);
    var url = $get("<%=lnkVideoLink.ClientID %>").value;
    alert(url);
    //$get("video").src = url;
    // $('[id*="MyVdo"]').attr('src', '../../MS_RIT_Training_Videos/REITIworkatTest.mp4');//type='video/mp4'
    $('[id*="MyVdo"]').attr('src', url);//type='video/mp4'
    //$('[id*="MyVdo"]')[0].play();
    $find("mpe").show();
    return false;
}

For Kenneth :

Alert:

In generall your code looks ok. Check the values of url again. I'm actually pretty sure the problem is in there, if the first function runs without any problem. — eisbehr
– eisbehr, Commented Jun 27, 2016 at 11:46
Implementing Kenneth code is playing the video now, but before that I get this error. I need to hit continue only then the video plays. — rp4361
– rp4361, Commented Jun 27, 2016 at 12:09

Kenneth · Accepted Answer · 2016-06-27 11:42:03Z

1

Are you sure the URLs are the same (hardcoded and the one you get from the element)?

also you can try to load the video programmatically after you set it

$('[id*="MyVdo"]')[0].load();

answered Jun 27, 2016 at 11:42

Kenneth

2412 silver badges11 bronze badges

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

8 Comments

eisbehr Over a year ago

Another question is not an answer. Post it as a comment!

rp4361 Over a year ago

An error is being shown on Runtime " Object doesn't support property or method 'load'". But the video is playing now on Continue.

Kenneth Over a year ago

if you execute $('[id*="MyVdo"]')[0] in developer tools or alert it. What element shows? It should be the video element

rp4361 Over a year ago

Please see the error snapshot. I have edited the question.

Kenneth Over a year ago

Can you do alert( $('[id*="MyVdo"]')[0]) before the load line and post that so i can see?

|

Collectives™ on Stack Overflow

html5 video tag setting src programmatically

1 Answer 1

8 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Linked

Related