Javascript 如何在HTML页面中播放视频

我试图在我的HTML页面上播放mp4视频，我搜索了网页，发现在HTML5中，我可以使用下面的

video

标记来实现这一点

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
</video>

D:\Video\samplevideo.mp4

是我的文件路径，

samplevideo.mp4

是视频的名称

在Chrome上显示错误

不允许加载本地资源：file:///D:/Video/samplevideo.mp4

在Firefox

上，所有候选资源都无法加载。媒体加载已暂停。

编辑 我的主要工作是在网页上播放视频

加载页面时，我需要在web上播放视频（HTML页面）。我的系统中有该视频，位于

D:\video\samplevideo.mp4

此路径，加载页面时如何播放该视频

---

您需要输入类似这样的替代文本，以检查浏览器或智能手机是否支持视频自动播放

像这样：

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

```

<video width="320" height="240" autoplay>
  <source src="www.xxx.com/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video width="320" height="240" autoplay>
  <source src="./src/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

//the HTML code
<div id="playhere"></div>

您的浏览器不支持视频标记。
```

试试这段代码

 <video muted autoplay loop class="video video js-video" id="hero-vid" poster="video/desktop-screen-banner.png">
    <source src="video/movie.webm" type="video/webm">
    <source src="video/movie.mp4" type="video/mp4">
    <source src="video/movie.ogg" type="video/ogg">
</video>

---

有关获取此工作的基本信息，请将

D:/Video/samplevideo.mp4

移动到与html文件相同的位置

然后将代码更改为：

<video width="320" height="240" autoplay>
  <source src="samplevideo.mp4" type="video/mp4">
</video>

确保将Tomcat设置为服务器

.mp4

mimetype或扩展名

---

接下来，您应该阅读HTML中路径的工作原理。

我可以给您一些建议。首先，您可以使用有关视频的绝对路径，将视频文件放在服务器上，然后您可以获得一个路径，如

www.xxx.com/movie.mp4

，您可以在

HTML页面上编写代码，如下所示：

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

```

<video width="320" height="240" autoplay>
  <source src="www.xxx.com/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video width="320" height="240" autoplay>
  <source src="./src/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

//the HTML code
<div id="playhere"></div>

第三，您可以使用
input
标记上载本地视频文件
HTML
代码，如下所示：

  <input type="file" id="myInput"/>
  <video controls autoplay></video>


     var input = document.getElementById('myInput'), 
         video = document.getElementById('myVideo');
        input.onchange = function () {
            var file = this.files[0];
            var url = URL.createObjectURL(file);
            video.innerHTML = '<source src="' + url + '" type="video/mp4">';
        }

第四，使用
对象
标记。您可以编写代码，如下所示：

<video width="320" height="240" autoplay>
  <source src="movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

```

<video width="320" height="240" autoplay>
  <source src="www.xxx.com/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

<video width="320" height="240" autoplay>
  <source src="./src/movie.mp4" type="video/mp4">
  Your browser does not support the video tag.
</video>

//the HTML code
<div id="playhere"></div>

//HTML代码

//js代码
功能播放（fn）{
var-str=''；
document.getElementById（'playhere'）。innerHTML=str；
}
//那是你的视频文件位置
播放（'D:\\Video\\samplevideo.mp4'）

但chrome浏览器不支持这种方式

对不起，我是英语新手。你能试试这个吗

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>


您的浏览器不支持视频标记。

也可以通过此链接了解更多信息

您的视频加载是否正确？查看您的浏览器控制台以了解任何错误。请参阅@否它未加载它显示错误
不允许加载本地资源：file:///D:/Video/samplevideo.mp4
在crome和on fire fox上
未能加载所有候选资源。媒体加载已暂停。
usefile:///D:/Video/samplevideo.mp4 或在Web服务器上托管，并给出url@DevsiOdedra我已经看到的那个，它将从本地驱动器选择视频，然后播放嘿，我正在做同样的事情，你正在从谷歌复制粘贴答案，请尝试使用此语法作为替代：
嘿，我正在做同样，我的主要问题是视频文件在我的本地电脑中，所以我应该放置什么来代替
src=“movie.mp4”
，你能解释一下movie.mp4文件在哪里吗？制作视频文件夹。视频需要3种格式1。）webm 2。）mp4 3。）oggI已经制作了一个视频文件夹，它位于我的PC中，不在我的项目中，我可以在我的网页上播放其中任何一种，在尝试相对路径后，无需使用所有三种格式。你是说要在我的项目中创建一个视频文件夹并将该视频放在其中？我无法移动到该视频我的HTML位置我只需要从文件/文件夹调用它，因为它将是动态的。用户将根据那里的要求更改视频注意错误
不允许加载本地资源：file:///D:/Video/samplevideo.mp4
-不允许您加载本地资源。用户将无法在您的（tomcat）Web服务器提供的页面上在其机器上播放视频。用户如何选择以其他方式动态生成视频。请详细说明您的问题，因为我怀疑您的回答是“是”，我也在这样做，但我的视频文件在本地计算机中，而不是在我的项目中，因此我应该在sre=“movie.mp4”中放置什么？您可以添加正确的路径。1。右键单击视频文件。然后去房地产2。然后您可以获取文件的位置。并将它们添加到您的src=”“hare中。请检查此参考。希望这能对你有所帮助。嘿，你的答案是建议先上传视频，这里我的系统（PC）中有一个视频，我需要播放，我的第四个建议可以帮助你。