Javascript 如何通过选择link-HTML更改视频源_Javascript_Html_Dynamic

Javascript 如何通过选择link-HTML更改视频源

javascript html dynamic

Javascript 如何通过选择link-HTML更改视频源,javascript,html,dynamic,Javascript,Html,Dynamic,我正在尝试从选择链接更改视频源。因此，当在页面上选择链接时，它会将视频开销更改为另一个视频的源，有点像播放列表。这是我的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">&l

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


视频


其他视频

查看HTML标准：

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

<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 />

在

line type=“video.mp4”中，您不能在此处放置此类型的值

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

为了实现您的要求，如果您将视频路径粘贴在链接的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>

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

我对javascript非常陌生，因此我对代码的理解非常模糊。如果我想将这段代码实现到我的html中，并让它与我自己的html一起工作，我该怎么做呢？我已经更新了我的代码。基本上更改视频真实位置的路径。然后我只需添加链接来更改源代码，该链接是否采用id“change_link”，或者该链接如何与javascriptYeah绑定。添加如下链接：

（例如）。只要HTML和JS匹配，您可以随意制作。例如，不能在HTML中设置为

id=“change\u link”

，但在JS中设置为

$（“.change\u link”）

。

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