javascript - 需要从页面源中定位视频代码，以及如何使视频可播放

Question

我有一个需求，需要在博客中直接嵌入视频代码。

我能够找出视频所在的代码，我将它存储在一个 html 文件中，并将其命名为 video.html

这是我必须从中提取视频的链接，观看视频链接:

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

问题是当我上传 video.html 文件时，只有静态图像被加载。我需要视频在点击按钮时可以播放，这样我就可以直接在博客中插入这个 video.html。

代码如下:

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

我知道我只加载图像源，因此视频将作为图像加载。

另外，如何在博客中直接插入video.html。

请帮我解决这个问题。

谢谢。

更新:

是否可以通过我正在创建的 html 文件加载视频？我的意思是，如果我可以提取视频的内容服务器，那么视频是否可以通过 html 文件播放？谢谢。

更新:

我稍微修改了一下代码，直接添加了视频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">

我认为通过这样做，视频将可以播放，直接使用 HTML 文件，后来我将在博客中使用它。

但是，问题还是没有解决。

请让我知道我哪里错了，即使这意味着从 moneycontrol 页面重构 ajax 请求，尽管我对 Ajax 脚本编写一无所知。

谢谢。

Answer 1

查看页面源码HTML后，发现点击播放按钮时，会有ajax请求获取真实视频嵌入代码。在你的例子中，这段代码是

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

有关更多详细信息，ajax 请求处理程序位于 http://www.moneycontrol.com/mccode/news/article/load_video_ajax.php `。你可以在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);
        }
      }
    });
  }
} 

另一个问题是定位视频位置的 flashvar 属性。正如您在嵌入代码中所见，Flash 播放器使用相对 URL 作为输入。因此，恐怕您无法仅使用其自己的 HTML 嵌入来自该站点的视频。

已更新

在 ajax 响应中，视频 uri 位于两段:

• 服务器 server=http://videos.moneycontrol.com/web18/mc-vods/
• 视频相关 url streamurl=2013Jul/manoj_variuousstocks_25jul.mp4

根据以上数据，视频的完整网址为http://videos.moneycontrol.com/web18/mc-vods/2013Jul/manoj_variuousstocks_25jul.mp4。您可以将它与其他播放器一起使用 as in my demo加载视频。