用HTML 5視頻插入video元素播放多個(gè)視頻

寒冬殘荷 · 發(fā)表于 2021-6-4 21:46

我有的這個(gè)代碼可以自動(dòng)連續(xù)播放，但不能像您的那樣有視頻清單且可以想看哪一個(gè)就點(diǎn)擊那一個(gè)。

195400 · 發(fā)表于 2021-6-5 07:46

華妹發(fā)表于 2021-6-4 21:46 我有的這個(gè)代碼可以自動(dòng)連續(xù)播放，但不能像您的那樣有視頻清單且可以想看哪一個(gè)就點(diǎn)擊那一個(gè)。

195400 · 發(fā)表于 2021-6-5 07:47

循環(huán)播放 + 點(diǎn)播

畢竟是老年人自娛自樂用不著花里胡哨的功能吧

寒冬殘荷 · 發(fā)表于 2021-6-5 08:14

195400 發(fā)表于 2021-6-5 07:46
var videoArray = [
["http://url.amp3a.com/youku.php/XNDQzNTIxNjE ...

謝謝！謝謝！

您真的真的是高手呀！我不敢說JavaScript你是最厲害的，但我說你是有時(shí)間來論壇玩最厲害的！我在網(wǎng)上看著學(xué)了幾句HTML語句，CSS和JavaScript怎么看都不懂。老了上網(wǎng)太久眼睛和頸椎痛，所以也不能像年輕時(shí)那樣拼命學(xué)習(xí)……

寒冬殘荷 · 發(fā)表于 2021-6-5 08:17

195400 發(fā)表于 2021-6-5 07:47
循環(huán)播放 + 點(diǎn)播

畢竟是老年人自娛自樂用不著花里胡哨的功能吧

是的，我也不喜歡花里胡哨的東西，只是練習(xí)，試看該語句（或?qū)傩裕┻\(yùn)行結(jié)果……

195400 · 發(fā)表于 2021-6-5 09:22

慢慢看、慢慢揣摩總會(huì)有所心得的，不工作了總得找點(diǎn)事干消磨時(shí)間對吧。

<div id="playframe" style="width:800px;height:auto !imprtant;margin:16px auto;position:relative;
overflow:hidden;border:12px brown solid;border-radius:12px;min-height:320px;font-size:16px;">
<video id="mPlayer" controls autoplay type="video/mp4" width='100%'></video>
<ol style="width:280px;height:200px;color:blue;position:absolute;left:30px;top:24px;font-weight:bold;cursor:pointer;">
</ol>
</div>
<script type="text/javascript">
var videoArray = [ // 歌曲視頻參數(shù)組
["http://url.amp3a.com/youku.php/XNDQzNTIxNjE4OA==.mp4", "《我的中國夢..》"],
["http://url.amp3a.com/youku.php/XNDk2MDY0OTQ1Ng==.mp4", "《我們這一輩》--- 王佑貴"],
["http://url.amp3a.com/youku.php/XNTE2MDAwMzAzNg==.mp4", "《山路十八彎》--- 李瓊"],
["http://url.amp3a.com/youku.php/XNDE5NzM3NTQ0OA==.mp4", "《渴望》 --- 毛阿敏"],
["http://url.amp3a.com/youku.php/XMzc2NzU3NjUwMA==.mp4", "《青藏高原》 --- 韓紅"],
["http://url.amp3a.com/youku.php/XNDkzMTE3NDcyMA==.mp4", "《可可托海的牧羊人》--- 亞男"],
["http://url.amp3a.com/youku.php/XNTA0Njg3OTM2NA==.mp4", "《送親》--- 亞男"],
["http://url.amp3a.com/youku.php/XNTE1NTM1MTU0OA==.mp4", "《知青之歌》"]
];
// 初始化菜單
var items = new Array();
var olObj = document.querySelector('#playframe ol');
for(i = 0 ; i < videoArray.length; i++) {
oli = document.createElement('li');
oTxt = document.createTextNode(videoArray[i][1]);
oli.appendChild(oTxt);
olObj.appendChild(oli);
items[i] = oli;
}
// 初始化播放參數(shù)
var player = document.querySelector('#mPlayer');
var curIdx = 0;
player.focus();
player.src = videoArray[curIdx][0];
items[curIdx].style.color = 'red';
// 一曲播放完的事件處理
player.onended = function() {
items[curIdx].style.color = 'blue';
player.pause();
curIdx++;
if(curIdx >= items.length) curIdx = 0;
player.src = videoArray[curIdx][0];
items[curIdx].style.color = 'red';
player.play();
}
// 每個(gè)菜單項(xiàng)添加點(diǎn)擊事件處理
for(n = 0; n < items.length; n++) {
items[n].onclick = function() {
player.pause();
items[curIdx].style.color = 'blue';
for(j = 0; j < items.length; j++) {
if(this.innerHTML == videoArray[j][1]) {
player.src = videoArray[j][0];
this.style.color = 'red';
curIdx = j;
break;
}
}
player.play();
}
}
</script>