0

我正在尝试通过选择链接来更改视频的来源。因此，当在页面上选择链接时，它将视频开销更改为另一个视频的来源，有点像播放列表。这是我的 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>
4

3 回答 3

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;
});
于 2012-05-18T01:38:48.580 回答
0

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

修改后的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'))
});​

于 2012-05-18T01:43:20.167 回答
0

在行中<source src="video.mp4" type="video.mp4" />type="video.mp4" 是错误的，你不能在这里放置这种类型的值

这是类型的一些示例：video/mp3、video/ogg、video/wbem。

于 2012-05-18T01:41:06.090 回答