如何创建 HTML / CSS 代码，以允许带有按钮的可滚动侧边栏更改旁边播放器中的视频源？

Posted 2023-05-07

【中文标题】如何创建 HTML / CSS 代码，以允许带有按钮的可滚动侧边栏更改旁边播放器中的视频源？

【英文标题】：How do I create an HTML / CSS code that will allow a scrollable side bar with buttons to change the source of a video in the player beside?

【发布时间】：2018-05-07 23:41:29

【问题描述】：

这是一个我想要的示例：https://tvplayer.com/watch 只是更简单，因为没有限制。点击即可更改视频源，就像 YouTube 播放列表一样。

【参考方案1】：

首先 - 您不能仅通过 HTML 和 CSS 动态更改页面内容。你应该使用一点 JS。在我们的例子中，这是一个（查看 codepen 示例以了解它是如何工作的）：

document.addEventListener('click', function(e) 
var source = e.target.dataset.source,
    video = document.getElementById('video');
if (source) 
    video.src = "https://www.youtube.com/embed/" + source;
    
);

这不是一个完美的代码，但我想这对你来说是一个很好的起点。祝你好运:)

Codepen example

【讨论】：

天哪，这正是我想要的！不过有一件事（我对这个东西有点陌生）是否可以将按钮更改为图像？

当然，只需将标签从按钮更改为图像，并添加 src 属性（不要忘记数据源，因为没有此属性脚本将无法工作）。干杯。

非常感谢！我能够将按钮更改为图像。我让一切正常工作，唯一出现的问题是如果我将源更改为直接 mp4 文件，一些浏览器会尝试下载它。你知道有什么方法可以解决吗？我希望我不会太麻烦

很高兴知道 :) 如您所见，脚本是为 youtube 视频编写的。您可以稍作修改，使其适用于您的来源。

您应该使用