Question

我正在尝试用html5播放视频。它无法在任何浏览器中使用。

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

我使用了w3schools example，但我的视频无效。

我只是看到黑屏。

当我点击按钮时，我得到以下错误i firebug。

TypeError：myVideo为null

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

<!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>

Answer 1

您的代码很好看here - 如果我从videojs插入示例网址，它可以正常工作。

我建议您尝试阅读此article以开始使用HTML5视频而不是W3schools。

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

如果您想了解有关错误代码的确切原因的更多信息，可以尝试使用section末尾的代码。

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>

Answer 2

您确定源路径是否正确？

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

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

AddType video/ogg .ogv .ogg
AddType video/webm .webm
AddType video/mp4 .mp4

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

2 个答案: