Question

Good day,

I am attempting to create a webpage that when the user clicks something (triggered by a javascript onClick) call, an ajax request is sent to the server which triggers a php file to generate html to be assigned to the .innerHTML of a div.

Everything works fine except that the video does not have the controls (like the play button, fullscreen, etc)

Without the AJAX call, a simple hard coded version displays the video just fine with the controls, so something with the AJAX. I am using the Video JS player and to my knowledge the code doesn’t have any scripts that need to execute.

Here is my php code…

<?php

    echo '<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="720" height="528" data-setup=\'{"controls":true}\'><source src="videos/'.$_GET["fn"].'" type=\'video/ogg\'/></video>';

?>

I believe it has something to do with the fact that javascript doesn’t execute on an AJAX call, but I don’t know for sure…

Thanks!

Answer 1

VideoJS checks for video tags on pageload, when your AJAX result markup is not loaded yet. You need to manually initialise VideoJS after your video call has returned.

var myPlayer = _V_("example_video_1");

See VideoJS API documentation for details: http://videojs.com/docs/api/