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

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

这是一个专为移动设备优化的页面（即为了让你能够在 Google 搜索结果里秒开这个页面），如果你希望参与 V2EX 社区的讨论，你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/967398

V2EX 是创意工作者们的社区，是一个分享自己正在做的有趣事物、交流想法，可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.