video.js - 单击链接时更新视频源答案

【问题标题】：video.js - update video source when clicking on a linkvideo.js - 单击链接时更新视频源
【发布时间】：2013-05-15 11:23:10
【问题描述】：

我正在尝试创建一个嵌入视频的页面，当单击视频帧下方的链接时，该页面会动态更改源。源视频在我的主机服务器上。即这张图片说明了它：

![页面示例][1]

我遇到了this page，它似乎有答案，但我试过了，它没有用。按照示例，我在正文中粘贴了 css 和 javascript，并在正文中粘贴了必要的 html。我更新了对我的 url 的所有引用，并尝试保持文件名与测试示例相同。以下是我尝试过的。

有人可以指出我的错误，或者提供更优雅的方法吗？基本上在单击链接时动态更改嵌入的视频，并且视频在所有典型的浏览器和大多数设备中都能正常工作。这是一个 wordpress 网站，~~using JW Player for 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>

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

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

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页面都试过了，结果是一样的。

我不确定这个脚本是否会做我想做的事？

【问题讨论】：

标签： javascript html video dynamic video.js

【解决方案1】：

这会覆盖视频元素的 src 属性 3 次，因此将始终设置为 webm 视频。

$("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");

改为使用 video.js API 加载一系列源，以便 video.js 可以选择当前播放技术可以播放的一个：

$vid_obj.src([
  { type: "video/mp4", src: $content_path+$target+".mp4" },
  { type: "video/webm", src: $content_path+$target+".webm" },
  { type: "video/ogg", src: $content_path+$target+".ogv" }
]);

更新小提琴：http://jsfiddle.net/mister_ben/8awNt/

【讨论】：

video.js API 链接已失效。

【解决方案2】：

javascript 示例似乎不包含 video.js 库。您可以尝试在头部包含以下内容。

<link href="http://vjs.zencdn.net/c/video-js.css" rel="stylesheet">
<script src="http://vjs.zencdn.net/c/video.js"></script>

否则，有没有办法在某处实时查看页面？

【讨论】：

【解决方案3】：

除了对原问题的整体回答外，上面misterben回答的视频切换在video.js的当前版本（4.8.0）中仍然有效，但更改海报图像的代码与原来的不同问题帖子，或截至 2014 年 9 月 5 日的 jsfiddle code sample。

您需要对user239759的原始问题代码（如下引用）进行两处小修改：

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

 ...
 ...
 ...

// replace the poster source
$("img.vjs-poster").attr("src",$content_path+$target+".png").show();

到这里：

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

 ...
 ...
 ...

// replace the poster source
$(".vjs-poster").css("background-image","url("+$content_path+$target+".png)").show();

如果您使用的是标准 video.js 代码和相关的 css。

还需要注意的是，上面的代码还没有弄明白，海报图片除了文件扩展名外，应与视频命名相同，并与视频放在同一目录下。除非您为海报图片使用不同的变量 $content_path。

【讨论】：