怎么在html加视频

在HTML中添加视频是一项常见的任务，无论是为了增强网页的视觉效果，还是为了提供教程或演示，以下是如何在HTML中添加视频的详细步骤：

1、使用<video>标签

HTML5引入了一个新的元素<video>，用于在网页上嵌入视频，这个元素有一个必需的属性src，用于指定视频文件的URL，还可以使用其他一些属性来控制视频的行为和外观。

以下代码将在网页上显示一个名为"myVideo.mp4"的视频：

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

在这个例子中，width和height属性定义了视频的尺寸，controls属性添加了播放、暂停和音量控制。<source>标签用于指定视频文件的URL，type属性定义了视频文件的MIME类型，如果浏览器不支持<video>标签，将显示<source>标签中的文本。

2、使用<embed>标签

除了<video>标签，HTML还提供了<embed>标签来嵌入视频，这个标签与<object>标签类似，但主要用于内嵌多媒体内容。

以下代码将在网页上显示一个名为"myVideo.swf"的视频：

<embed width="320" height="240" src="myVideo.swf">

在这个例子中，width和height属性定义了视频的尺寸，src属性指定了视频文件的URL，注意，这个例子中的视频文件是一个Flash动画，因此需要使用SWF格式，如果浏览器不支持Flash，或者没有安装Flash插件，将无法显示这个视频。

3、使用JavaScript播放器

除了HTML内置的视频元素和<embed>标签，还可以使用JavaScript播放器来嵌入视频，这种方法的优点是可以提供更多的控制选项，例如自定义播放按钮、进度条等，缺点是需要编写更多的代码，而且可能会影响网页的性能。

以下代码使用了jPlayer这个流行的JavaScript播放器来显示一个名为"myVideo.mp4"的视频：

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
        <div class="jp-gui jp-interface">
            <ul>
                <li><a href="" class="jp-play" tabindex="1">Play</a></li>
                <li><a href="" class="jp-pause" tabindex="1">Pause</a></li>
            </ul>
        </div>
        <div class="jp-progress">
            <div class="jp-seek-bar">
                <div class="jp-play-bar"></div>
            </div>
        </div>
    </div>
</div>
<script src="https://ajax.lug.ustc.edu.cn/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://www.jplayer.org/latest/jquery.jplayer.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){  
    $("jquery_jplayer_1").jPlayer({  
        ready: function () {  
            $(this).jPlayer("setMedia", {  
                title: "myVideo.mp4",  
                m4v: "myVideo.m4v",  
                ogv: "myVideo.ogv",  
                webmv: "myVideo.webm",  
                poster: "poster.jpg"  
            });  
        },  
        swfPath: "JPlayer",  
        supplied: "mp4, m4v, oga, ogv, webmv",  
        wmode: "window",  
        useStateClassSkin: true,  
        autoBlur: false,  
        smoothPlayBar: true,  
        keyEnabled: true,  
        remainingDuration: true,  
        toggleDuration: true,  
        displayCounter: true,  
        loop: false,  
        addClassControls: true,  
        mode: "html5",  
        cssSelectorAncestor: "jp_container_1"  
    });  
});   
</script>

在这个例子中，首先创建了一个用于显示播放器的容器，然后使用jQuery和jPlayer库来初始化播放器，在setMedia方法中，指定了视频文件的各种格式和URL，以及一个海报图片，使用CSS选择器将播放器添加到容器中。