怎么在html中加入视频文件，代码怎么写

通过html5中的video标签添加视频文件。

1、新建html文件，如图所示，在body标签中添加video标签，为video标签设置“src”属性，属性值是视频文件地址，这里以html同一目录下的“movie.mp4”视频为例：

2、此时的视频只会显示一个封面，并没有控制按钮，这时为video标签添加“controls”属性，如图所示，不需要添加属性值，可以看到视频中出现了常用的控制按钮：

3、直接插入的视频显示宽和高是视频本身默认的宽和高，这时可以给video添加我们想要的宽和高，这里以宽度400和高度300为例，添加属性“width”，属性值为“400”，添加属性“height”，属性值为“300”：

4、这时视频默认是加载完成后等待用户点击播放按钮再播放，如果需要加载完成后自动播放，可以给video添加属性“autoplay”，属性值为“autoplay”，这时视频加载完成后就会自动播放：

为何会有一个 blob？直接点击这个链接，返回了 404！什么情况？于是对此做了一番探索。

The following simple example loads a video chunk by chunk as fast as possible, playing it as soon as it can. This example was written by Nick Desaulniers and can be viewed live here .

首先创建变量名为 video 的 DOM 对象和变量名为 mediaSource 的 MediaSource 对象。通过函数 createObjectURL 来将 DOM::video 对象的属性 src 和 mediaSource 进行“连接”。接下来，通过注册事件 Event::sourceopen 来触发当上述“连接”结束之后的回调处理。回调处理就是需要赋值 视频数据 的地方。 调用 MediaSource::addSourceBuffer 方法来构建一个存放视频数据的 sourceBuffer。 在往 sourceBuffer 中存放数据结束之后会触发事件 Event::updateend 。通过注册这个事件的回调，可以知晓数据已经加载完毕，然后关闭数据流，调用 Video::play 函数通知浏览器播放视频。至此，整个 Blob 运行机制讲解完毕。

W3C 上有明确关于 MediaSource 扩展接口的文档。扩展文档中是这么定义的， 它允许 JS 脚本动态构建媒体流和允许 JS 传送媒体块到 H5 媒体元素。这种接口的应用可以让 H5 播放器实现持续添加数据进行播放。

综上，这个只是 HTML5 提供的新特性，但是截止目前还是处于试验状态。

在上面示例中使用的视频格式不是普通的 MP4 而是 FMP4 。如果没有注意到这个问题，就可能造成：

HTML5 MediaSource works with some mp4 files and not with others (same codecs)。

解决方案：

It works fine if mp4 is fragmented.

You can do that using Bento4's mp4fragment tool.