Html video.js - 单击链接时更新视频源
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16657369/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
video.js - update video source when clicking on a link
提问by user2397591
I am trying to have a page with embedded video that dynamically will change the source when a link below the video frame is clicked. The source videos are on my host server. i.e. this pic illustrates it:
我正在尝试创建一个带有嵌入视频的页面，当单击视频帧下方的链接时，该页面将动态更改源。源视频在我的主机服务器上。即这张照片说明了它：
![sample of page][1]
![页面样本][1]
I came across this page, which seems to have the answer, but I tried it and it didn't work. Following the example, I pasted the css & javascript in the and the necessary html in the body. I updated all the references to my urls and tried to keep file names the same as the example for testing. Below is what I tried.
我遇到了这个页面，它似乎有答案，但我试过了，但没有用。按照示例，我将 css 和 javascript 粘贴到正文中，并将必要的 html 粘贴到正文中。我更新了对我的 url 的所有引用，并尝试使文件名与测试示例相同。以下是我尝试过的。
Can someone point out my errors, or provide a more elegant way of doing this? Basically dynamically change embedded video when link is clicked and the video work in all the typical browsers, and most devices.
This is for a wordpress site, using JW Player for wordpress, (my error) instead I found this script/code is actually for Video.js
有人可以指出我的错误，或者提供一种更优雅的方法吗？单击链接时基本上会动态更改嵌入的视频，并且视频可以在所有典型浏览器和大多数设备中运行。这是一个 wordpress 网站，使用 JW Player for wordpress，（我的错误）相反，我发现这个脚本/代码实际上是用于Video.js
It loads the pre image but doesn't play.
它加载预图像但不播放。
As a test I tried this and it does play single video properly:
作为测试，我尝试了这个，它确实可以正确播放单个视频：
<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>
The javascript version for multiple source links
多个源链接的 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>
The preload image for the 1st video loads but no video, error is "No video with supported format and MIME type found"
第一个视频的预加载图像加载但没有视频，错误是“没有找到支持格式和 MIME 类型的视频”
So I added the source for the first video in this section
所以我在本节中添加了第一个视频的来源
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>
Result the 1st video loads but not the other linked videos.
结果第一个视频加载但不是其他链接的视频。
names of the videos/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
视频/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.03vid_03 .png
I have tried this both in wordpress page and html page the results are the same.
我在 wordpress 页面和 html 页面中都尝试过，结果是一样的。
I'm not sure even if this script will do what I want?
我不确定这个脚本是否会做我想要的？
回答by misterben
This overwrites the video element's src attribute three times, so it will always be set to the webm video.
这将覆盖 video 元素的 src 属性三次，因此它将始终设置为 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");
Instead use the video.js APIto load an array of sources so video.js can pick one the current playback tech can play:
而是使用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" }
]);
Updated fiddle: http://jsfiddle.net/mister_ben/8awNt/
回答by heff
The javascript example doesn't appear to include the video.js library. You might try including the following in the head.
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>
Otherwise, is there a way to view the page live somewhere?
否则，有没有办法在某处查看页面？
回答by kenjikato
Adding to the overall answer to the original question, the video switching answered by misterben above still works in the current version (4.8.0) of video.js, but the code that changes the poster image does not work from the original question post, or in the jsfiddle code sampleas of 9/5/2014.
除了对原问题的整体回答之外，上面misterben回答的视频切换在video.js的当前版本（4.8.0）中仍然有效，但更改海报图像的代码在原问题帖中不起作用，或在2014年 9 月 5 日的jsfiddle 代码示例中。
You need to make two small modifications to user239759's original question code (referenced below) from:
您需要对 user239759 的原始问题代码（下面引用）进行两个小的修改：
// hide the current loaded poster
$("img.vjs-poster").hide();
...
...
...
// replace the poster source
$("img.vjs-poster").attr("src",$content_path+$target+".png").show();
to this:
对此：
// hide the current loaded poster
$(".vjs-poster").hide();
...
...
...
// replace the poster source
$(".vjs-poster").css("background-image","url("+$content_path+$target+".png)").show();
This is if you are using the standard video.js code, and associated css.
这是如果您使用标准 video.js 代码和相关联的 css。
It should also be noted for those that haven't figured it out from the code above, the poster images should be named the same as the videos except for the file extension, and placed in the same directory as the videos. Unless you use a different var for $content_pathfor the poster images.
还需要注意的是，上面的代码还没有搞清楚，海报图片除了文件扩展名之外，应该与视频同名，并与视频放在同一目录下。除非您$content_path为海报图像使用不同的变量。
