所以我目前正在嘗試制作一個視頻流媒體網站，但我有點卡住了。
我正在嘗試讓劇集選擇器更改視頻的來源，但我對如何使其更改播放器的來源感到有些困惑。我還嘗試根據選擇的視頻更改播放器下方的文本。
<div class="container">
<div class="main-video">
<div class="video">
<video src="video link here"></video>
<h3 class="ep-title">00. Prologue</h3>
</div>
</div>
<div class="episode-list">
<div class="episode active">
<img src="image link here" alt="">
<h3 class="title">00. Prologue</h3>
</div>
<div class="episode">
<img src="image link here" alt="">
<h3 class="title">01. A Winter Day, A Fateful Night</h3>
</div>
</div>
</div>
</div>
<script>
let listVideo = document.querySelectorAll('.episode-list .episode');
let mainVideo = document.querySelector('.main-video video');
let title = document.querySelector('.main-video .title')
listVideo.forEach(video =>{
video.onclick = () =>{
listVideo.forEach(episode => episode.classList.remove('active'));
video.classList.add('active');
};
});
</script>
這是我的頁面代碼（不包括導航欄和 plyr 代碼）目前的樣子。我事先道歉，因為我的問題可能有點復雜（我缺乏腦細胞哈哈）但任何幫助表示贊賞:)
uj5u.com熱心網友回復：
const btn = document.getElementById('change-url');
const video = document.getElementById('video');
btn.addEventListener('click',()=>{
console.log(video)
video.setAttribute('src','http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4');
})<button id="change-url">change url</button>
<br/><br/>
<video id="video" src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4" width="300px" controls autoplay></video>uj5u.com熱心網友回復：
我認為mainVideo.setAttribute('src', YOURSOURCELINK);應該更改視頻src。要更改標題的文本，您可以使用title.innerHTML = "NEWTEXT"
這方面的一個例子可能是：
“index”引數是串列中的索引（請記住，js 的第一個索引從 0 開始），因此要獲取第一集，您將使用 changeVideo(0)，第二集使用 changeVideo(1) 等
var list = [{
title: "Episode 1",
src: "some source link"
},{
title: "Episode 2",
src: "seconde source link"
}];
function changeVideo(index){
let mainVideo = document.querySelector('.main-video video');
let title = document.querySelector('.main-video .title')
mainVideo.setAttribute("src", list[index].src)
title.innerHTML = list[index].title
}
那么您將需要在您的視頻選擇中添加一個 onclick 事件，例如添加onclick="changeVideo(1)"您的<div >
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/336344.html
標籤：javascript html css 网络 视频流