用HTML 5视频插入video元素播放多个视频
<div align="center">
<div align="center" style="left: 0px; top: 0px; width: 820px; position: relative; min-width: 200px !important; max-width: 100% !important;">
<table style="BOX-SIZING: border-box; FONT-SIZE: 16pt; BORDER-TOP: rgb(95,156,239) 5px solid; FONT-FAMILY: 楷体_GB2312; BORDER-RIGHT: rgb(95,156,239) 5px solid; WIDTH: 100%; BORDER-BOTTOM: rgb(95,156,239) 5px solid; FONT-WEIGHT: bold; COLOR: #009900; TEXT-ALIGN: LEFT; BORDER-LEFT: rgb(95,156,239) 5px solid; DISPLAY: inline-block; LINE-HEIGHT: 160%; -moz-border-radius: 5px; border-radius: 15px; padding-BOTTOM:50px; background-image: url(http://www.hitow.net/data/attachment/album/201812/28/142517ktv7r3gkvigkfrtw.jpg); " bgcolor="#cccccc">
<tbody><tr><td>
<video id="player" style="width: 100%; left: 0px; top: 0px; position: relative;HEIGHT: auto; min-HEIGHT: 200px !important; object-fit:fill" src="http://vfx.mtime.cn/Video/2019/03/19/mp4/190319212559089721.mp4" autoplay="autoplay" loop="loop" controls="controls" x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true" poster="http://www.hitow.net/data/attachment/album/201605/13/081852b3b5b2ab4bbat4bz.jpg" preload="auto" x5-video-orientation="portraint"></video><br><br>
<span style="FONT-SIZE: 22pt; TEXT-ALIGN: left; color: #ff0000; line-height: 170%;"><br>视频目录:（想观看哪一个视频就点击该视频的名称）</span> <br><br>
<script type="text/javascript">
function setPlayerSrc(video_src)
{
var video=document.getElementById("player");
//var video =document.getElementsByTagName('video');
video.src=video_src;
video.play();
}
</script>
<a onclick="javascript:setPlayerSrc('http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4')"> 1、动画片</a><br>
<a onclick="javascript:setPlayerSrc('http://vfx.mtime.cn/Video/2019/02/04/mp4/190204084208765161.mp4')"> 2、驯龙高手</a><br>
<a onclick="javascript:setPlayerSrc('http://vfx.mtime.cn/Video/2019/03/19/mp4/190319222227698228.mp4')"> 3、紧急救援</a><br>
<a onclick="javascript:setPlayerSrc('http://vfx.mtime.cn/Video/2019/03/19/mp4/190319212559089721.mp4')"> 4、玩具总动员</a><br>
<a onclick="javascript:setPlayerSrc('http://vfx.mtime.cn/Video/2019/03/19/mp4/190319104618910544.mp4')"> 5、无限动力</a><br>
<a onclick="javascript:setPlayerSrc('http://vfx.mtime.cn/Video/2019/03/14/mp4/190314223540373995.mp4')"> 6、钢铁侠</a><br>
<a onclick="javascript:setPlayerSrc('http://vfx.mtime.cn/Video/2019/03/14/mp4/190314102306987969.mp4')"> 7、电影英雄出少年片段</a><br>
<a onclick="javascript:setPlayerSrc(' http://vod.cntv.lxdns.com/flash/mp4video62/TMS/2018/12/23/3b221b5b0ea242159d8e53fcac33a384_h264418000nero_aac32.mp4')"> 8、娘子军连歌</a><br>
</td></tr></tbody></table>
</div></div><br> 代码简单而实用，赞一个！ 只是现今视频实际地址的获得已是越来越难了。
红枫 发表于 2021-6-3 17:21
代码简单而实用，赞一个！ 只是现今视频实际地址的获得已是越来越难了。
感谢老师临帖指导！我这只是想学代码而做的练习而已。老了没有爱好很无聊，学点东西防老痴。 http://www.yinhuabbs.cn/data/attachment/forum/201912/23/081932efdaeebejfcgdclj.gif
只有第一个和最后一个可播放。
195400 发表于 2021-6-3 21:21
只有第一个和最后一个可播放。
感谢老师临帖指导！
MP4地址是随便从网上找来的。除最后一个是央视的能正常链接，其它的一般晚上链接打不开。 华妹 发表于 2021-6-3 21:46
感谢老师临帖指导！
MP4地址是随便从网上找来的。除最后一个是央视的能正常链接，其它的一般晚上链接打 ...
其实所有的视频链接都是正常的，只是video标签只能播放特定编码格式（H264）的MP4视频。
<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;">
<video id="mPlayer" src='http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4' controls loop autoplay type="video/mp4" width='100%'></video>
<ol style="width:240px;height:200px;color:blue;position:absolute;left:30px;top:24px;font-weight:bold;cursor:pointer;">
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
<li class='items' ></li>
</ol>
</div>
<script type="text/javascript">
var videoArray = [
["http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4", "动画片"],
["https://ss2.meipian.me/users/121759489/3352f920-c904-11eb-838a-99e21041a4fa.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://vod.cntv.lxdns.com/flash/mp4video62/TMS/2018/12/23/3b221b5b0ea242159d8e53fcac33a384_h264418000nero_aac32.mp4", "娘子军连歌"]
];
var items = document.getElementsByClassName("items");
var player = document.querySelector('#mPlayer');
player.focus();
for(n = 0; n < items.length; n++) {
var txtNode = document.createTextNode(videoArray);
items.appendChild(txtNode);
items.onclick = function() {
player.pause();
for(j = 0; j < items.length; j++) {
if(this.innerHTML == videoArray) {
player.src = videoArray;
break;
}
}
player.play();
}
}
</script>
保留了第二个不能正常播放的视频。
195400 发表于 2021-6-4 11:20
其实所有的视频链接都是正常的，只是video标签只能播放特定编码格式（H264）的MP4视频。
大侠级！{:1_293:}{:1_293:}{:1_293:}我以为video能播放所有的MP4视频。我没有学过代码，只是在论坛看了大家的贴模仿练习的，让大侠见笑了！大侠可以教教我吗？ 华妹 发表于 2021-6-4 14:09
大侠级！我以为video能播放所有的MP4视频。我没有学过代码，只是在论坛看了 ...
http://bpic.588ku.com/element_origin_min_pic/19/03/15/788f9cddaf5f7298969d84b4e57d433e.jpg 195400 发表于 2021-6-4 15:18
帮我把你的代码改成播放完后自动连续播放下一个视频。这样我就把我喜欢的视频放在一起，有时间时连续看或想看哪一个就点哪一个。可以吗？ <div style="position: relative" align="center">
<table border="0" cellspacing="0" cellpadding="0" align="center"> <tbody><tr><td>
<div align="center" style="left: 0px; top: 0px; width: 100%; height: auto; position: relative; min-width: 200px !important; overflow:hidden ">
<div align="center" style="padding: 0px 1px; border-radius: 10px; border: 8px dotted rgb(255, 255, 0); border-image: none; width: 95%; text-align: center; color: rgb(255, 255, 0); line-height: 160%; font-family: 楷体_GB2312; font-size: 16pt; background-image: url("http://www.hitow.net/data/attachment/album/201412/21/120817gs388s1gvs3ofj8f.jpg"); background-color: rgb(255, 255, 255);">
<div id="playervideo">
<video id="example_video_1" class="video-js vjs-default-skin" controls="controls" x-webkit-airplay="true" x5-playsinline="true" webkit-playsinline="true" playsinline="true" x5-video-orientation="portraint" autoplay="autoplay" preload="none" poster="http://www.hitow.net/data/attachment/album/201603/29/130457ouulphaq9pnpqiu7.jpg" height="auto" width="100%">
<source src="http://url.amp3a.com/youku.php/XNDI3MzEzMDA0OA==.mp4" type="video/flv">
videoObject.muted=true
</video>
<script language="javascript">
var vList=['http://url.amp3a.com/youku.php/XNDI3MzEzMDA0OA==.mp4','http://clips.vorwaerts-gmbh.de/big_buck_bunny.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/XNDkyMjUyODYzNg==.mp4'];
var vLen = vList.length;
var curr = 0;
var video = document.getElementById("example_video_1");
/*var video = document.createElement("VIDEO");
video.setAttribute("width", "100%");
video.setAttribute("height", "500");
video.setAttribute("id", "example_video_1");
video.setAttribute("class", "video-js vjs-default-skin");
video.setAttribute("preload", "none");
video.setAttribute("poster", "http://www.hitow.net/data/attachment/album/201603/29/130457ouulphaq9pnpqiu7.jpg");
video.setAttribute("data-setup", "{}");
video.setAttribute("controls", "yes");
video.setAttribute("defaultMuted", "true");
document.getElementById("playervideo").appendChild(video);*/
//document.body.appendChild(video);
video.addEventListener('ended', play);
play();
function play(e) {
video.src = vList;
video.load();
video.play();
curr++;
if(curr >= vLen){
curr = 0;
}
}
</script>
</div>
</div></div>
</td></tr></tbody></table>
</div><br><br>