HTML5 Video和Audio

Dear 丶 2022-08-23 10:00 171阅读 0赞

1.视频  
video提供了播放，暂停和音量空间来控制视频。  
标签之间插入的内容是提供给不支持video元素的浏览器显示的。  
video元素支持多个source元素，source元素可以连接不同的视频文件，浏览器使用第一个可识别的格式。

<video width="320" height="240" controls>
      <source src="movie.mp4" type="video/mp4">
      <source src="movie.ogg" type="video/ogg">
    您的浏览器不支持Video标签。
    </video>

2.为视频添加按钮  
![这里写图片描述][20160614103428257]

<div style="text-align:center"> 
      <button onclick="playPause()">播放/暂停</button> 
      <button onclick="makeBig()">放大</button>
      <button onclick="makeSmall()">缩小</button>
      <button onclick="makeNormal()">普通</button>
      <br> 
      <video id="video1" width="420">
        <source src="mov_bbb.mp4" type="video/mp4">
        <source src="mov_bbb.ogg" type="video/ogg">
        您的浏览器不支持 HTML5 video 标签。
      </video>
    </div> 
    
    <script> var myVideo=document.getElementById("video1"); //获取视频文件 function playPause() { if (myVideo.paused) //如果是暂停，点解则开始播放 myVideo.play(); else myVideo.pause(); } function makeBig()//设置视频的宽度，使其变大 { myVideo.width=560; } function makeSmall()//设置视频的宽度变小 { myVideo.width=320; } function makeNormal() { myVideo.width=420; } </script>

3.音频

<audio controls>
      <source src="horse.ogg" type="audio/ogg">
      <source src="horse.mp3" type="audio/mpeg">
    您的浏览器不支持 audio 元素。
    </audio>

[20160614103428257]: /images/20220721/c3615c275b344c1f8db8fe0ea1882381.png

发表评论取消回复

表情：

评论列表（有 0 条评论，171人围观）

还没有评论，来说两句吧...

相关阅读

相关【HTML5】 Audio/Video全解（集合贴）

【HTML5】 Audio/Video全解（集合贴） 2015-03-17 [chenh\_doc][chenh_doc] <table> <tbody>

男娘i/ 2022年09月24日 04:28/ 0 赞/ 143 阅读

相关 HTML元素详细介绍之Audio&Video

准备把HTML5中的每一个新元素都做一番详细的介绍，希望对大家开发有很大的帮助，其中每个元素都会带有一两个示例，希望大家喜欢哈。先做Audio和Video的介绍 audi

我就是我/ 2022年09月24日 04:28/ 0 赞/ 176 阅读

相关 HTML5 Audio/Video 标签,属性,方法,事件汇总

<audio> 标签属性： src：音乐的URL preload：预加载 autoplay：自动播放 loop：循环播放 cont

缺乏、安全感/ 2022年08月26日 14:12/ 0 赞/ 244 阅读

相关 HTML5 Video和Audio

1.视频 video提供了播放，暂停和音量空间来控制视频。标签之间插入的内容是提供给不支持video元素的浏览器显示的。 video元素支持多个source元素，

Dear 丶/ 2022年08月23日 10:00/ 0 赞/ 172 阅读

相关浅谈HTML5中的<audio>和<video>

1、video和audio的优点：不需要第三方插件就能播放音频和视频了，可以直接插入，并且用同一的API接口控制。 2、video和audio的缺点： 1) 暂时

痛定思痛。/ 2022年06月18日 09:58/ 0 赞/ 312 阅读

相关 HTML5 Video/Audio网页信息汇总

![1343662092_4499.jpg][] 基础: [HTML5视频简介][HTML5] (CN,2012) [Introduction to HT

拼搏现实的明天。/ 2022年06月08日 08:27/ 0 赞/ 163 阅读

相关 HTML5 API 之video/audio 视频/音频

video的使用方法： <video autoplay="autoplay" controls="controls" width="800" muted="muted" lo

港控/mmm°/ 2022年06月01日 00:28/ 0 赞/ 266 阅读

相关 HTML5的video元素和audio元素兼容性

一介绍因为各浏览器对音频和视频的支持互不相同，开发者可能希望为<video>和<audio>元素指定多个媒体源，此时可以借助<source>子元素来实现。二代

忘是亡心i/ 2022年05月12日 00:40/ 0 赞/ 174 阅读

相关 HTML5——多媒体：audio音频、video视频

1. audio音频标签、video视频标签 ![70][] 2. 特性：（1）autoplay：自动播放；注意：在谷歌浏览器中autoplay有时会失效（其他浏览器没

痛定思痛。/ 2022年05月11日 05:08/ 0 赞/ 647 阅读

相关 HTML5_video_and_audio

video 和 audio标签简介资源共享手机界面： 3G门户： http://mobile.3g.cn/mobile3g.aspx?cin=518&wap

水深无声/ 2022年04月06日 07:45/ 0 赞/ 230 阅读