在通过ajax加载的页面/内容之后初始化video.js.

Question

I'm currently in the process of setting up infinite scroll on one of my wordpress sites which loads the next set of posts via ajax once you've scrolled to the bottom of the page. Because of this, I have been unable to get videojs working properly (readas: at all); so am hoping someone can help me with this.

First and foremost, I'm using videojs code directly in my theme, which pulls data from a posts custom fields, and adds the post id to the video tags id attribute. Here's a sample of the template code:

<video id="video_<?php echo get_the_id(); ?>" class="video-js vjs-default-skin"  
  controls preload="auto" width="640" height="264"  
  poster="<?php echo $poster; ?>">  
 <source src="<?php echo $mp4vid; ?>" type='video/mp4' />  
</video>

(To note, I'll add ogg/webm later)

I've seen the docs page that says to add the following block:

_V_("example_video_1", {}, function(){
  // Player (this) is initialized and ready.
});

but no matter where I add it (with the necessary attributes added), the player does not work. I mean, with the above I get standard html5 video player, but has none of the benefits of videojs.

Anyone have a working solution for something like this?

Answer 1

referencing the correct ID might do the trick...

<script type="text/javascript">
_V_("video_<?php echo get_the_id(); ?>", {}, function(){
  // Player (this) is initialized and ready.
});
</script>

<video id="video_<?php echo get_the_id(); ?>" class="video-js vjs-default-skin"  
  controls preload="auto" width="640" height="264"  
  poster="<?php echo $poster; ?>">  
 <source src="<?php echo $mp4vid; ?>" type='video/mp4' />  
</video>