Need to locate code of video from the page source and also, how to make the video playable

I have a requirement where I need to embed the video code directly in a blog.

I was able to figure out the code where the video is there, I stored it in a html file,named it as video.html

This is the link from where I have to extract the video, Watch Video link:

http://www.moneycontrol.com/news/stocks-views/hdil-tata-global-ifci-top-picks-manoj-vayalar_925072.html

The problem is that when I upload video.html file, only the static image gets loaded. I need the video to be playable when I click the button, so that I can directly insert this video.html in the blog.

Here is the code:

<div class="CL"></div>
<div class="vidnewsin">
<div class="vidmd">
<div class="vidplayin">
<div class="gD_18"><a href="javascript:void(0);" onclick="javascript:load_vplayer('925072');" title="Watch Video" ><span class="vidtg"></span><strong>Watch Video</strong></a></div><div class="MT10"></div>
<div id="load_player">
<div class="PRVEDO"><a class="playBtnSn" href="javascript:void(0);" onclick="javascript:load_vplayer('925072');"></a><img src="http://img.moneycontrol.co.in/news_image_files/vid_img/2013/07/925072.jpg" width="441" height="361" alt="" /></div>
<div><img src="http://img.moneycontrol.co.in/images/news/vplrBar.gif" alt="" /></div>
                                         <div class="PT10">

I know that I am loading only the image source, hence the video is getting loaded as an image.

Also, how to directly insert the video.html in the blog.

Kindly help me on this.

Thanks.

Updated:

Is it possible to load video through the html file which I am creating? I mean, if I can extract the content server of the video, then, will the video be playable through an html file? Thanks.

Updated:

I have modified the code a bit, and directly added the video url:

<div class="CL"></div>
<div class="vidnewsin">
<div class="vidmd">
<div class="vidplayin">
<div class="gD_18"><a href="javascript:void(0);" onclick="javascript:load_vplayer('http://videos.moneycontrol.com/web18/mc-vods/2013Jul/manoj_variuousstocks_25jul.mp4');" title="Watch Video" ><span class="vidtg"></span><strong>Watch Video</strong></a></div><div class="MT10"></div>
<div id="load_player">
<div class="PRVEDO"><a class="playBtnSn" href="javascript:void(0);" onclick="javascript:load_vplayer('http://videos.moneycontrol.com/web18/mc-vods/2013Jul/manoj_variuousstocks_25jul.mp4');"></a><img src="http://img.moneycontrol.co.in/news_image_files/vid_img/2013/07/925072.jpg" width="441" height="361" alt="" /></div>
<div><img src="http://img.moneycontrol.co.in/images/news/vplrBar.gif" alt="" /></div>
                                         <div class="PT10">

I thought that by doing this, the video will be playable, directly with an HTML file, which late, I will use in the blog.

But still, the issue is not resolved.

Kindly let me know where am I wrong, even if this means, refactoring the ajax request from the moneycontrol page, though I have no idea on Ajax scripting.

Thanks.

After reviewing the source HTML of the page, I found that when the play button clicked, there will be a ajax request to get the real video embed code. In your case, this code is

<div style="z-index:0;" id="player">
  <embed width="468" height="351" flashvars="servicetype=chunk&amp;streamurl=2013Jul/manoj_variuousstocks_25jul.mp4&amp;totalchunk=4&amp;videopart=&amp;server=http://videos.moneycontrol.com/web18/mc-vods/&amp;controllerpath=http://img.moneycontrol.co.in/tv/flash/control_moneycontrol_chunk_24July.swf&amp;autoplay=1&amp;showrelatedbutton=0&amp;relatedPath=http://api.moneycontrol.com/solr/solr_related_videos_multiple_test.php?id=925072%26format=player&amp;site=www.moneycontrol.com&amp;trackingurl=http://vtracking.in.com/TackImg_CHK_VOD.PNG&amp;googlepreroll=0&amp;googlepostroll=0&amp;googleoverlay=0&amp;channelindex=3&amp;vastpreurl=http%3A%2F%2Fc7.zedo.com%2Fjsc%2Fc1%2Ffns.vast%3Fn%3D1656%26c%3D1211%26d%3D18%26s%3D11%26v%3Dvast2%26z%3D&amp;vastposturl=http%3A%2F%2Fc7.zedo.com%2Fjsc%2Fc1%2Ffns.vast%3Fn%3D1656%26c%3D1214%26d%3D18%26s%3D11%26v%3Dvast2%26z%3D&amp;vastoverlayurl=http%3A%2F%2Fc7.zedo.com%2Fjsc%2Fc1%2Ffns.vast%3Fn%3D1656%26c%3D1213%26d%3D83%26s%3D11%26v%3Dvast2%26z%3D" allowscriptaccess="always" wmode="transparent" allowfullscreen="true" quality="high" bgcolor="#ffffff" name="videoPlayer" id="videoPlayer" style="undefined" src="http://img.moneycontrol.co.in/tv/flash/Main_chunk_24July.swf" type="application/x-shockwave-flash">
</div>

For more details ,the ajax request handler is located at http://www.moneycontrol.com/mccode/news/article/load_video_ajax.php`. You can see it in the javascript

function load_vplayer(auto_num)
{
  if(navigator.userAgent.match(/iPad/i) != null)
  {
    window.location="http://www.moneycontrol.com/tablet/index.php?v_autono="+auto_num;
  }
  else
  {
    $.ajax({
      type: "POST",
      url: "/mccode/news/article/load_video_ajax.php",
      data: {auto_num:auto_num},
      timeout:5000,
      error: function(jqXHR, exception) {},
      success: function(data){
        if(data!='')
        {
          $("#load_player").html("");
          $("#load_player").html(data);
        }
      }
    });
  }
} 

Another problem is the flashvar property which locating the video location. As you can see in the embed code, the flash player use relative url as input. Therefore, I afraid that you can not embed video from this site just by using its own HTML.

Updated

In the ajax respond, the video uri is located in two segment:

  • The server server=http://videos.moneycontrol.com/web18/mc-vods/
  • The video relative url streamurl=2013Jul/manoj_variuousstocks_25jul.mp4

With the above data, the full url of the video is http://videos.moneycontrol.com/web18/mc-vods/2013Jul/manoj_variuousstocks_25jul.mp4. You can use it with another player as in my demo to load the video.