如何在 HTML 页面中播放视频

Question

我正在尝试在我的 HTML 页面上播放 mp4 视频，我搜索了网络，发现在 HTML5 中我可以使用下面这样的video 标签来做到这一点

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

我面临的问题

• 我的主要问题是我的视频存储在本地计算机的某个位置，那么我如何从该路径调用它
• 在我的系统中，它位于D drive，所以我想从那里调用它
• 我是新手，所以我不知道我的做法是否正确；我的方法正确吗？
• 我的要求是在我的网页上自动播放视频

我就是这样的

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

D:\Video\samplevideo.mp4 是我的文件路径，samplevideo.mp4 是视频名称

在 Chrome 上显示错误 Not allowed to load local resource: file:///D:/Video/samplevideo.mp4

在 Firefox 上 All candidate resources failed to load. Media load paused.

编辑

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

加载页面时我需要在网络上播放视频（HTML 页面）我的系统中有该视频位于 D:\Video\samplevideo.mp4 这个路径，加载页面时如何播放该视频。

Answer 1

试试这个代码

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

Answer 2

你能试试这个吗

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

也可以点击此链接了解更多信息。

http://mrbool.com/how-to-add-and-play-videos-in-html/26171

Answer 3

为了获得这项工作的基本知识，请将D:/Video/samplevideo.mp4 移动到与您的 html 文件相同的位置。

然后将代码更改为：

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

确保将 Tomcat 设置为服务器 .mp4 mimetype 或扩展。

接下来，您应该了解路径在 HTML 中的工作原理。

Answer 4

我可以给你一些建议。首先，你可以使用视频的绝对路径，将视频文件放在服务器上，然后你可以得到一个路径，如www.xxx.com/movie.mp4，你可以在上面写代码你的HTML page，像这样：

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

其次，您可以将您的视频文件放在与HTML页面位置相同的目录中。例如，如果您的HTML页面在名为test的目录中。您可以创建一个名为src的目录，并且你可以在HTML page上写代码，像这样：

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

第三，可以使用input标签上传本地视频文件，HTML代码如下：

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

js 代码如下：

     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">';
        }

第四，使用object标签。你可以这样写代码：

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

//js code
function play(fn){
  var str='<object id="MediaPlayer" height="300" classid="CLSID:6BF52A52-394A-11D3-B153-00C04F79FAA6" style="width:70%"><param name="URL" value=\''+fn+'\'\/><param name="autoStart" value="1"\/><param name="balance" value="0"\/><param name="baseURL" value=""\/><param name="currentPosition" value="0"\/><param name="currentMarker" value="0"\/><param name="defaultFrame" value=""\/><param name="enabled" value="1"\/><param name="enableErrorDialogs" value="0"\/><param name="enableContextMenu" value="0"\/><param name="fullScreen" value="0"\/><param name="invokeURLs" value="1"\/><param name="mute" value="0"\/><param name="playCount" value="1"\/><param name="rate" value="1"\/><param name="stretchToFit" value="0"\/><param name="uiMode" value="full"\/><param name="volume" value="100"\/><param name="windowlessVideo" value="1"\/><\/object>';
   document.getElementById('playhere').innerHTML=str;
}
// that's your video file location
 play('D:\\Video\\samplevideo.mp4')

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

对不起，我是新来的说英语的人。

Answer 5

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

像这样：

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

```