小白失败复现&请教：写一段 HTML5 代码，要求在一个播放窗口实现多个视频的顺序播放。

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 459 天前的主题，其中的信息可能已经有所发展或是发生改变。

没有经过系统学习，的确不知道怎么办了。😭 https://telegra.ph/%E5%B0%8F%E7%99%BD%E5%A4%B1%E8%B4%A5%E5%A4%8D%E7%8E%B0%E8%AF%B7%E6%95%99%E5%86%99%E4%B8%80%E6%AE%B5HTML5%E4%BB%A3%E7%A0%81%E8%A6%81%E6%B1%82%E5%9C%A8%E4%B8%80%E4%B8%AA%E6%92%AD%E6%94%BE%E7%AA%97%E5%8F%A3%E5%AE%9E%E7%8E%B0%E5%A4%9A%E4%B8%AA%E8%A7%86%E9%A2%91%E7%9A%84%E9%A1%BA%E5%BA%8F%E6%92%AD%E6%94%BE-08-22 服务器在荷兰。通过 cloudflare 代理。请大佬指教。

复现

Cloudflare

播放

指教

7 条回复 • 2023-08-22 17:06:50 +08:00

yuzo555

2023-08-22 15:51:48 +08:00

这个需求直接用 Dash 或者 HLS 呀，搞这么复杂干什么

signxer

2023-08-22 15:59:05 +08:00

`<video id="video" controls autoplay loop>`
你写了个 loop ，当然循环播放第一段啦😅

kamahi

2023-08-22 16:25:30 +08:00

@signxer 我尝试删掉 loop ，第一段视频播放完自动停止播放了。麻瓜了，chrome 的限制策略？我再试试吧。🤯谢谢您💕
Uncaught DOMException DOMException: play() failed because the user didn't interact with the document first.
https://developer.chrome.com/blog/autoplay/
at window.onload (c:\Users\lee\Desktop\auto-play-video.html:24:40)
--- load ---
at <anonymous> (c:\Users\lee\Desktop\auto-play-video.html:23:19)
auto-play-video.html:24
arg0:
DOMException: play() failed because the user didn't interact with the document first.{code: 0, name: 'NotAllowedError', message: 'play() failed because the user didn't intera…th the document first.
code:
0
message:
'play() failed because the user didn't interact with the document first.
name:
'NotAllowedError'
[[Prototype]]:
DOMException
window.onload @ c:\Users\lee\Desktop\auto-play-video.html:24:40

kamahi

2023-08-22 16:32:28 +08:00

@yuzo555 技术水平远远不够，wordpress 掌握的还很一般。用播放器着实有点困难。
许多视频编码格式是 vp09 ，av01,h265 。dash 可能有点困难，原生的浏览器播放还好。实在不行，那也只有强制绕过缓存了。
似乎一切又回到了起点。🐶😭

mdn

2023-08-22 16:39:06 +08:00

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/source

source 主要用于视频格式兼容，播放下一个基于 js 实现

```html
<html>
<head>
<title>视频播放器</title>
</head>

<body>
<video id="video" controls></video>

<script>
let index = 0
const videos = [
'https://cdn.gouuuu.com/2023/08/tvzongheba-%E6%97%A0%E7%94%A8%E7%9A%84%E8%B0%8E%E8%A8%80-%EC%86%8C%EC%9A%A9%EC%97%86%EC%96%B4-%EA%B1%B0%EC%A7%93%EB%A7%90-My-Lovely-Liar-E01-000.mp4',
'https://cdn.gouuuu.com/2023/08/tvzongheba-%E6%97%A0%E7%94%A8%E7%9A%84%E8%B0%8E%E8%A8%80-%EC%86%8C%EC%9A%A9%EC%97%86%EC%96%B4-%EA%B1%B0%EC%A7%93%EB%A7%90-My-Lovely-Liar-E01-001.mp4',
'https://cdn.gouuuu.com/2023/08/tvzongheba-%E6%97%A0%E7%94%A8%E7%9A%84%E8%B0%8E%E8%A8%80-%EC%86%8C%EC%9A%A9%EC%97%86%EC%96%B4-%EA%B1%B0%EC%A7%93%EB%A7%90-My-Lovely-Liar-E01-002.mp4',
]
function playNextVideo() {
if (index == videos.length) {
alert('看完了')
return
}
video.src = videos[index++]
video.play()
}
window.onload = function () {
var video = document.getElementById('video')
video.addEventListener('ended', playNextVideo)
playNextVideo()
}
</script>
</body>
</html>
```

signxer

2023-08-22 16:39:13 +08:00

@kamahi #3 https://pastebin.com/ZhcjcWkV

kamahi

2023-08-22 17:06:50 +08:00

@mdn @signxer 真的可以欸，尽管我不是这个专业的，貌似已经成功了。具体效果在问题链接里，已更新。请大佬收下红包，支付宝口令 thankv2exsignermdn