如何通過選擇鏈接更改視頻源 - HTML

我試圖通過選擇鏈接來更改視頻的來源。因此，當頁面上選擇鏈接時，它會將視頻開銷更改爲另一個視頻的來源，有點像播放列表。這是我的HTML如何通過選擇鏈接更改視頻源 - 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>

來源

2012-05-18 Elmir Kouliev

退房標準的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-18 01:38:48 element119

我對JavaScript很陌生，所以我對代碼的理解非常模糊。如果我想將這些代碼實現到我的html中，並且使用我自己的html，那麼我該如何去做呢？ –

我更新了我的代碼。基本上改變路徑到您的視頻的真實位置。 – element119

然後，我只是添加鏈接來更改來源，並且這個鏈接採取id「change_link」，或者如何鏈接到javascript –

在<source src="video.mp4" type="video.mp4" />線類型=」 video.mp4「是錯誤的，你不能在這裏放置這種類型的值

這裏是一些類型的例子：視頻/ mp3，視頻/ ogg，視頻/ wbem。

來源

2012-05-18 01:41:06

要實現你所要求的，如果你堅持視頻路徑說alt的鏈接，然後你可以參考它，並將其粘貼到視頻onclick 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')) 
});

來源

2012-05-18 01:43:20

如何通過選擇鏈接更改視頻源 - HTML

回答

相關問題