html5学习(多媒体，播放视频)

浅浅的花香味﹌ 2022-12-31 06:21 173阅读 0赞

> ### **html5学习(多媒体，播放视频) ** ###
> 
> **播放视频主要是使用<video></video>标签，**我本篇文章只是抛砖引玉，还有很多**<video>**标签的api我没列举出来，**<video>**标签的其他很多属性，方法，事件我没有列举出来，大家可以自行查阅相关文档！

播放视频的代码并不太多，主要就是使用**<video></video>标签；注意：低版本的浏览器可能不支持<video></video>标签**

video标签的poster属性可以设置视频的开头图片<br />
    <video id="video2" controls poster="../img/panda4.jpg">
    <source src="../video/test.mp4" type="video/mp4">
    <source src="../video/test.ogg" type="video/ogg">
    您的浏览器版本太低，不支持视频播放，请升级浏览器！
    </video>

**直接po图和代码**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>html5学习(多媒体，播放视频)</title>
    <link rel="stylesheet" type="text/css" href="../css/inputAndDiv.css">
    <style type="text/css">
    video {
    	width: 600px;
    	height: 400px;
    }
    </style>
    </head>
    <body style="background-color: #CCE8CF;">
    <h3>html5学习(多媒体，播放视频)</h3>
    第一种写法<br />
    <video id="video1" src="../video/test.mp4" controls width="600px" height="400px">
    您的浏览器版本太低，不支持视频播放，请升级浏览器！
    </video>
    <br />
    第二种写法(推荐)<br />
    video标签的poster属性可以设置视频的开头图片<br />
    <video id="video2" controls poster="../img/panda4.jpg">
    <source src="../video/test.mp4" type="video/mp4">
    <source src="../video/test.ogg" type="video/ogg">
    您的浏览器版本太低，不支持视频播放，请升级浏览器！
    </video>
    <br />
    <input type="button" value="开始播放" id="play" style="width: 100px;">
    <input type="button" value="重新加载" id="reload" style="width: 100px;">
    </body>
    <script type="text/javascript">
    function $(elementId) {
    	return document.getElementById(elementId);
    }
    
    var input1Node = $("play");
    var input2Node = $("reload");
    var video2Node = $("video2");
    console.log(input1Node);
    console.log(input2Node);
    console.log(video2Node);
    
    //开始播放视频
    input1Node.onclick = function() {
    	video2Node.play();
    }
    
    //重新加载视频
    input2Node.onclick = function() {
    	video2Node.load();
    }
    </script>
    </html>

完！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70]: /images/20221120/3f6f30d733d84a8eaab8a54bef8f2e41.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 1]: /images/20221120/a4e83b6f58e940f5847aa99bbc6b89d2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2N6aDUwMA_size_16_color_FFFFFF_t_70 2]: /images/20221120/2b78252b42194cebbc7f568233a46a19.png