为什么我的视频不能在html5中播放

why my video doesnt play in html5?

本文关键字：html5 播放 不能 我的 的视频 为什么      更新时间：2023-09-26

我正在尝试用html5播放视频。它在任何浏览器中都不起作用。

我创建了播放/暂停等按钮。我使用功能来启用按钮功能。

我用了一个w3schools的例子，但我的视频不起作用。

我只看到一个黑屏。

当我点击按钮时，我得到了下面的错误I firebug。

TypeError：myVideo为空

我的代码在下面。为什么我的视频不起作用？

<!DOCTYPE html> 
<html> 
<body> 
<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br> 
  <video id="video1" width="420">
    <source src="mov_bbb.mp4" type="video/mp4">
    <source src="mov_bbb.ogg" type="video/ogg">
    Your browser does not support HTML5 video.
  </video>
</div> 
<script> 
var myVideo=document.getElementById("video1"); 
function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.width=560; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script> 
</body>
</html>

您的代码很好，请参阅此处-如果我插入videojs中的示例URL，它会很好地工作。

我建议你试着阅读这篇文章，开始使用HTML5视频，而不是W3schools。

您的视频文件或服务器配置存在文件格式问题（可能是您的mime类型，但所有内容都在上面的链接中解释过）。

如果你想了解更多关于错误代码的确切原因，你可以试试本节末尾的代码。

HTML5视频在一开始可能很棘手，但你会明白的：）

JSfiddle代码：

<div style="text-align:center"> 
  <button onclick="playPause()">Play/Pause</button> 
  <button onclick="makeBig()">Big</button>
  <button onclick="makeSmall()">Small</button>
  <button onclick="makeNormal()">Normal</button>
  <br /> 
  <video id="video1" width="420">
    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4"></source>
    <source src="http://vjs.zencdn.net/v/oceans.webm" type="video/webm"></source>
    Your browser does not support HTML5 video.
  </video>
</div> 
<script type="text/javascript"> 
var myVideo=document.getElementById("video1"); 
function playPause()
{ 
if (myVideo.paused) 
myVideo.play(); 
else 
 myVideo.pause(); 
} 
function makeBig()
{ 
myVideo.width=560; 
} 
function makeSmall()
{ 
myVideo.width=320; 
} 
function makeNormal()
{ 
myVideo.width=420; 
} 
</script>

您确定您的源路径是正确的吗？

另一件需要检查的事情是你的.htaccess.

将以下内容添加到服务器上的.htaccess文件中：

AddType video/ogg .ogv .ogg
AddType video/webm .webm
AddType video/mp4 .mp4
相关文章：