使用 html 显示 mp4 文件

Question

大家好，我正在努力以 mp4 格式显示 gif 图像：

<video width="320" height="240" >
  <source src="http://media4.giphy.com//media//64zSh1uTE7xxm//100w.mp4" type="video/mp4"/>
</video>

那是我的代码，但只加载了第一帧，然后一切都冻结了。 // 编辑我把它改成了这样：

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1"/>
<title>Insert title here</title>
</head>
<body>
 <video width="320" height="240" >
  <source src="http://media4.giphy.com//media//64zSh1uTE7xxm//100w.mp4" type="video/mp4" autoplay/>
</video> 
</body>
</html>

但仍然是静态图像。

edit2// 我添加了

controls="controls"

因为在XHTML 中，禁止属性最小化，autoplay 属性必须定义为video autoplay="autoplay"。

Answer 1

您还需要播放视频，因为默认情况下它会在 0:00 处暂停。这个问题有 3 种可能的解决方案。

使用 controls 属性 (<video ... controls>) 显示手动控制和播放
使用 autoplay 属性 (<video ... autoplay>) 来加载后自动播放视频

通过JavaScript获取元素并在那里播放（与在此解决方案中自动播放）：

var video = document.getElementById ("videoElement");
video.addEventListener ("loadedmetadata", function () { video.play (); });

有关 HTML5- 视频属性的更多信息，请查看 MDN：https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video

Answer 2

我自己HTML不是很精通，但是我也遇到过这个问题。视频在第一帧冻结的原因是，默认情况下，视频在 0:00 处暂停，这意味着如果没有用户干预或代码，视频将不会播放发挥自己。有两种解决方法：

将控件添加到此视频中，这可以通过将 <video width="320" height="240"> 更改为 <video width="320" height="240" controls> 或
通过添加 autoplay 属性来包含 autoplay，这可以通过再次将 <video width="320" height="240"> 更改为 <video width="320" height="240" autoplay> 来完成。

希望对您有所帮助！

Answer 3

将 autoplay 属性添加到视频标签，例如：

<video width="320" height="240" autoplay>

Answer 4

你忘了完整的构造。

<video width="320" height="240" controls> </video>

您可以使用其他属性代替控件。

autoplay - 指定视频准备就绪后立即开始播放
controls - 指定应显示的视频控件（例如 play/pause 按钮等）。
height- 设置视频播放器的高度
loop - 指定视频在每次结束时重新开始
muted - 指定视频的音频输出应静音
海报 - 指定在下载视频时或在用户点击播放按钮之前显示的图像
preload - 指定作者认为是否以及如何在页面加载时加载视频
src - 指定视频文件URL
width - 设置视频播放器的宽度

有关更多信息，请访问：w3schools

使用 html 显示 mp4 文件

Displaying mp4 file with html

html

mp4

gif