Question

我正在尝试使用嵌入视频的页面，当点击视频框架下方的链接时，该页面会动态更改源。源视频在我的主机服务器上。即这张照片说明了：

sample of page http://imageshack.us/a/img829/7679/testvidresult.png

我遇到this page，似乎有答案，但我尝试了它并没有奏效。按照这个例子，我粘贴了css＆amp; javascript中的和身体中必要的html。我更新了对我的网址的所有引用，并尝试保持文件名与测试示例相同。以下是我的尝试。

有人可以指出我的错误，或提供更优雅的方式吗？单击链接时，基本上动态更改嵌入视频，视频可在所有典型浏览器和大多数设备中使用。这是一个wordpress网站，~~使用JW Player进行wordpress~~ ，（我的错误）而不是我发现这个脚本/代码实际上是Video.js

它会加载预图像，但不会播放。

作为测试我试过这个并且它确实正确播放单个视频：

<video id="testvideo" class="video-js vjs-default-skin" width="440" height="300"     controls="controls">
              <source src="http://www.mywebsite.net/videos/testvid_01.mp4" type="video/mp4"/>
              <source src="http://www.mywebsite.net/videos/testvid_01.webm" type="video/webm"/>
              <source src="http://www.mywebsite.net/videos/testvid_01.ogv" type="video/ogg"/>
</video>

多源链接的javascript版本

<html>
    <head>
        <title></title>
        <style media="screen" type="text/css">
.wrap            { margin:30px auto 10px; text-align:center }
.container       { width:440px; height:300px; border:5px solid #ccc }
p                { font: 10px/1.0em 'Helvetica',sans-serif; margin:20px }
        </style>
<script>
$("input[type=button]").click(function() {
    var $target         = "testvid_"+$(this).attr("rel");
    var $content_path   = "http://www.mywebsite.net/videos/";  
    var $vid_obj        = _V_("div_video");

    // hide the current loaded poster
    $("img.vjs-poster").hide();

    $vid_obj.ready(function() {
      // hide the video UI
      $("#div_video_html5_api").hide();
      // and stop it from playing
      $vid_obj.pause();
      // assign the targeted videos to the source nodes
      $("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
      $("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
      $("video:nth-child(1)").attr("src",$content_path+$target+".webm");
      // replace the poster source
      $("img.vjs-poster").attr("src",$content_path+$target+".png").show();
      // reset the UI states
      $(".vjs-big-play-button").show();
      $("#div_video").removeClass("vjs-playing").addClass("vjs-paused");
      // load the new sources
      $vid_obj.load();
      $("#div_video_html5_api").show();
    });
});

$("input[rel='01']").click();
</script>   </head>

<body>
        <section class="container wrap">
  <video id="div_video" class="video-js vjs-default-skin" controls preload="auto" width="440" height="300" poster="http://www.mywebsite.net/videos/testvid_01.png" data-

setup="{}">  
    <source src=""  type="video/mp4">
    <source src=""  type="video/ogg">
    <source src=""  type="video/webm">
  </video>
</section>

<div class="wrap">
  <input rel="01" type="button" value="load video 1">
  <input rel="02" type="button" value="load video 2">
  <input rel="03" type="button" value="load video 3">
</div>

    </body>
</html>

第一个视频的预加载图像加载但没有视频，错误是＆＃34;找不到支持格式和MIME类型的视频＆＃34;

所以我在本节中添加了第一个视频的来源

setup="{}">  
        <source src="http://www.mywebsite.net/videos/videos/testvid_01.mp4"  type="video/mp4">
        <source src="http://www.mywebsite.net/videos/videos/testvid_01.ogv"  type="video/ogg">
        <source src="http://www.mywebsite.net/videos/videos/testvid_01.webm  type="video/webm">
      </video>

结果是第一个视频加载但不加载其他链接的视频。

视频名称/ png： testvid_01.mp4，testvid_01.ogv，testvid_01.webm，testvid_01.png testvid_02.mp4，testvid_02.ogv，testvid_02.webm，testvid_02.png testvid_03.mp4，testvid_03.ogv，testvid_03.webm，testvid_03.png

我在wordpress页面和html页面都试过这个结果是相同的。

我不确定即使这个脚本会按我的意愿行事吗？

Answer 1

您是否尝试通过JW Player's JavaScript API进行此操作？从我收集you can load a playlist并调用一个将在某个索引处播放视频的函数：

<强> playlistItem（指数）

开始播放指定索引处的播放列表项目。

单击链接时更新视频源

1 个答案: