在html5中插入video播放代码

（纳兰叶博客 nly3355.cn）

在我们html5中，新增一个元素叫做video，video这个元素对于站长来说并不陌生，它支持播放的视频有ogg、mpeg4、webm等等这些视频格式，用法如下

<video src="tjcblog.mp4" controls="controls"></video>

在这个使用方法中，src不用解释，肯定是引用文件，那controls属性就是用来控制播放、暂停和调整音量的空间，那么同时我们可以加入height或者width设置宽度和高度的属性

很多站长都很讨厌ie，因为ie非常不友好，所以，在版本比较低的ie浏览器，很有可能不支持video元素，那我们可以在<video></video>之间插入一段文字，那么如果浏览器不支持此元素的话就会显示出来了

<video src="tjcblog.mp4" controls="controls">sorry，您的浏览器暂时不支持video标签！</video>

那么假如说我们提供的视频格式是比较小众，不像mp4格式一样，那么我们可以提供两种视频格式，浏览器会选择一个自己能够识别的格式。

<source src="video/tjcblog.mp4" tyoe="video/mp4"></source>
<source src="video/tjcblog.ogg" tyoe="video/ogg"></source>

首先代码解释，在source标签，不能说在source标签吧，在所有标签中，src属性都是引用外部文件的，然后在type属性里，是在告诉浏览器，这个是一个视频的某某格式，方便浏览器识别一种自己可以支持的格式。

video标签的自动播放可以通过以下几种方式实现：

1. autoplay属性

设置autoplay属性即可实现自动播放。

  <video src="video.mp4" autoplay></video>

2. JavaScript控制

在JavaScript中可通过以下代码实现自动播放：

var video = document.getElementById("myVideo");
    video.play();

需要注意的是，为了在页面加载时自动播放视频，必须将代码放在window.onload或jQuery的$(document).ready中。

自动播放的限制及解决方案

自动播放的实现方式虽然简单，但在一些特殊情况下会存在限制。比如，浏览器会禁止网页自动播放声音，如果连续播放多个视频，也可能出现加载视频缓慢的问题。

1. 声音禁止自动播放

为了提升用户体验，浏览器一般会禁止网页自动播放声音。因此，如果需要自动播放视频，最好加上muted属性，即禁止音频播放。

<video src="video.mp4" muted autoplay></video>

2. 加载缓慢

如果需要页面上连续加载多个视频，会存在加载缓慢的问题。为了避免影响页面加载速度，可以通过JavaScript控制视频的加载和播放，待页面加载完成后再播放视频。

<video id="myVideo" src="video.mp4" muted controls preload="none"></video>

    <script type="text/javascript">
        var video = document.getElementById("myVideo");
        window.onload = function() {
            video.preload = "auto";
            video.play();
        };
    </script>

在这里，将video的preload属性设为none，即禁止浏览器自动加载视频。当页面加载完成后，通过JavaScript将preload属性设为auto，触发视频的加载和播放