Question

我正在尝试通过选择链接来更改视频来源。因此，当在页面上选择链接时，它会将视频开销更改为另一个视频的来源，有点像播放列表。这是我的html的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/    DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<link rel="stylesheet" href="VideosPage.css">


<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">

</script>

<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px;  padding:10px; border:1px solid black;">

<source src="video.mp4" type="video.mp4" />

</video>

 <br />


  <a> Other Video  </a>

Answer 1

查看HTML标准： http://www.whatwg.org/specs/web-apps/current-work/#video

您可以使用几种解决方案。一个是按顺序加载下一个视频，如播放列表：

<script type="text/javascript">
var nextVideo = "path/of/next/video.mp4";
var videoPlayer = document.getElementById('video');
videoPlayer.onend = function(){
    videoPlayer.src = nextVideo;
}
</script>
<video id="videoPlayer" src="path/of/current/video.mp4" autoplay autobuffer controls />

然后，建立一个改变它的链接就像（例如）：

一样简单

$("a.change_link").click(function(){
    videoPlayer.src = nextVideo;
});

Answer 2

在<source src="video.mp4" type="video.mp4" />行类型=“video.mp4”中的

是错误的，你不能在这里放置这种类型的值

这是类型的一些示例：视频/ mp3，视频/ ogg，视频/ wbem。

Answer 3

要实现您的要求，如果您将视频路径放在链接的alt中，则可以引用它并将其粘贴到视频的src中，并使用一些简单的jquery。

jsfiddle

修改后的HTML：

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Videos</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<link rel="stylesheet" href="VideosPage.css">
<script src="jquery-1.7.2.min.js" type="text/javascript"> </script>
<script type="text/javascript">

</script>
<video id="first_video" width="800" height="450" controls="controls" style="margin-left:380px;  padding:10px; border:1px solid black;">
<source src="video.mp4" type="video/mp3" />
</video>
 <br />
 <a alt="video2.mp4" id="other"> Other Video </a>

有些jquery：

$('#other').click( function() { 
$('#first_video').children('source').attr('src',$(this).attr('alt'))
});

如何通过选择链接来更改视频源 - HTML

3 个答案: