如何从css设置html5视频标签源

Question

任何具有 html css 专业知识的人都可以帮助我解决这个我无法解决的简单问题。

基本上，我的 html 页面有一个 video 元素，该元素附加了一个 src 属性。

现在，我要做的是，从视频元素中删除这个 src 属性，并将这个源放在那个视频元素的 css 类中。

那么，如何从 css 中设置视频元素的 src？

我尝试过使用 url,content 属性，但它似乎不起作用。
或者也许我做错了。 我将感谢任何可以为此提供任何输入或共享使用 css 设置 html5 视频元素源的小代码的人。 请帮我。 谢谢。

Answer 1

您不能通过 CSS 设置视频源。 因为你看到下面视频的基本结构：

<video>
  <source src="sample.mp4" type="video/mp4">
  <source src="sample.ogg" type="video/ogg">
  Your browser does not support HTML5 video.
</video>

您可以设置其他属性，如背景图片、颜色等。但是，您不能通过 css 设置源，该 css 用于设计播放按钮和任何其他按钮功能。 如果您确实需要在不使用<source src="sample.mp4" type="video/mp4"></source> 的情况下执行此操作，则必须使用 JavaScript。

Answer 2

我使用 CSS 将显示设置为 none 或 block，以便播放视频（“sample.mp4”或“sample2.mp3”取决于用户是在他的笔记本电脑上还是在他的手机上。

HTML：

<video id='video'>
    <source src="sample.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>
<video id='video2'>
    <source src="sample2.mp4" type="video/mp4">
    Your browser does not support HTML5 video.
</video>

CSS：

#video2 {display:none;}

@media only screen and (max-width: 500px) {
    #video2 {display:block;}
    #video {display:none;}
}