HTML5中audio与video标签的使用

最新推荐文章于 2022-11-26 18:44:23 发布
VIP文章 最新推荐文章于 2022-11-26 18:44:23 发布
阅读量2.3k 收藏 4
点赞数
分类专栏： 移动开发 文章标签： video audio poster canPlayType
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41581499/article/details/80097530
版权

最近做的微信分享页面中有大量的语音播放和视频展示，相关的好多方法属性以前都没接触过，现在记录下来！

1.  首先，了解关于两个标签的基本信息：

两个标签的基本属性：

属性 描述
audioTracks 返回表示可用音轨的 AudioTrackList 对象
autoplay 设置或返回是否在加载完成后随即播放音频/视频
buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象
controller 返回表示音频/视频当前媒体控制器的 MediaController 对象
controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）
crossOrigin 设置或返回音频/视频的 CORS 设置
currentSrc 返回当前音频/视频的 URL
currentTime 设置或返回音频/视频中的当前播放位置（以秒计）
defaultMuted 设置或返回音频/视频默认是否静音
defaultPlaybackRate 设置或返回音频/视频的默认播放速度
最低0.47元/天 解锁文章
我家小薇薇
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html5 音乐播放器 audio 标签使用概述
01-21
复制代码代码如下: <audio> 标签属性：src：音乐的URLpreload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条 <audioid u201dmedia”src=”http://www.abc.com/test.mp3″controls></audio> <video> 标签属性：src：视频的URLposter：视频封面，没有播放时显示的图片preload：预加载autoplay：自动播放loop：循环播放controls：浏览器自带的控制条width：视频宽度height：视频高度 <videoid=”media”src=”http://ww
微信小程序学习：audio组件发现的几个问题
草灯的专栏
10-18 1万+
这个只测试了action的method=play的情况下，其它的方法我有稍微改变了下src和action方法，发现只要一切换其它action方法和src歌曲后，歌曲都是未开播状态，所以应该不会出现什么问题。主要是play的情况下有几个小问题需要注意下！先上官方源码： wxml：： 播放 js：： Page({ data: { poster: 'http://y.gtim
微信小程序开发实战（14）：音频组件（audio）
一个被知识诅咒的人
07-24 2368
-----------支持作者请转发本文-----------audio是用于播放在线音频的组件，该组件默认会带一个控制面板，用于控制音频的播放和暂停，以及显示音频作者、音频名称和当前播...
小程序开发-音频播放
热门推荐
weixin_42597880的博客
08-01 1万+
一、音频组件 <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" controls></audio> controls的意思是是否显示默认控件，默认值是不显示的，当我们写出controls才会显示播放的控件。 二、切换歌曲功能 .wxml <audio poster...
video元素与audio元素详解
gjbss的博客
11-26 3449
video元素与audio元素详解：video/audio属性，video/audio方法
audio
weixin_33779515的博客
08-21 120
音频。 属性名 类型 默认值 说明 id String video 组件的唯一标识符 src String 要播放音频的资源地址 loop Boolean false 是否循环播放 controls Boolean true 是否显示默认控件 poster String 默认...
微信小程序封装音乐播放器组件
qq_43477721的博客
04-15 1415
微信小程序的官方文档中，已经有 audio 组件。 <!-- audio.wxml --> <audio poster="{{poster}}" name="{{name}}" author="{{author}}" src="{{src}}" id="myAudio" controls loop></audio> <button type="primary" bindtap="audioPlay">播放</button> <button
HTML5视频播放标签video和音频播放标签audio标签的正确用法
10-17
HTML5里引入的新标记 <audio> 和 <... 实现了HTML对视频播放和音频播放的原生支持，有了这种原生的HTML5视频播放器/音频播放器，我们不再需要flash技术，而直接能将视频/音频嵌入到了网页中
浏览器HTML5标签video和audio支持
03-19
浏览器HTML5标签video和audio支持 包含其相应支持的格式
HTML5 AudioVideo 标签,属性,方法,事件
06-14
HTML5 AudioVideo 标签,属性,方法,事件
让audio和video标签在任何浏览器中都兼容html5media.min.js
11-17
HTML5新增加的audio和video标签让我们增加了很多惊喜，可以让我们更方便的在网页中播放音频和视频。但目前很多浏览器不支持，无法在旧版的IE浏览器中使用。html5media.min.js却是一个能让这两个标签在各种新旧版IE...
关于video标签的基本应用（关于poster属性）
weixin_41641581的博客
10-09 1万+
基本的就不说啦！ 不说啦！ 不说啦！ 不说啦！   重要说说 poster属性 这是用来引用video的封面图片的！！！！！ 问题来了》》》 会出现下面这种状况。。。。。。。   铺不满，，，，，我的尴尬癌   不怕，，加个样式试试！！！ style="object-fit:cover" 其实你还可以改变属性的值，比如说： style="object-fit:f...
video和audio元素的属性、事件及使用
Fine9548的博客
06-07 1002
video和audio元素 HTML5中主要增加了两个新的多媒体元素：video和audio。从字面意思可以知道，video元素是与视频相关的，用于在页面中播放视频文件；audio元素是与音频相关的，用于在页面中播放音频文件。 autoplay属性 该属性用于设置指定的媒体文件，在页面加载完毕后是否自动播放。对于有的页面来说，所包含的视频或音频信息，不需要得到用户指令就可以直接播放。例如，页面内的宣传片、广告信息等，可以在对应的多媒体元素上添加autoplay属性的设置达到媒体自动播放的效果。 使用auto
video和audio标签
qq_53987671的博客
08-17 1964
一、video标签 作用：播放视频 webm 网页中专用的视频格式
Video和Audio标签的使用
影子
08-06 2024
Video和audio的应用 video元素 定义视频 <video src="movie.ogg" cotrols="cotrols">Video元素</video> audio元素 定义音频 <audio src="someaduio.wav">Audio元素</audio> 属性介绍： cotrols属性：如果出现该属性，则向用户显示控件，比如播放按钮autoplay属性：如果出现该属性，则视频在就绪后就马上播放。loop属性：重复播放...
html5 video标签 自定义设置（全屏、音量、下载、画中画）
Mystery2020的博客
10-13 5649
html5 video标签 自定义设置（全屏、音量、下载、画中画）
audio、video、canvas、截取视频设置封面、截取某个时间画面、根据鼠标实时更新视频封面
weixin_44266761的博客
11-14 1185
效果： 要点： 音频：<audio src='' controls="controls""></audio> 视频：<video id='video' src='' crossOrigin="anonymous" controls="controls"></video> react视频组件：import { Player } from 'v...
HTML——audio标签和video标签
时光·漫步的博客
05-15 8220
    &lt;video&gt;标签专门用来播放网络上的视频或电影，&lt;audio&gt;标签则专门用来播放网络上的音频数据。使用这两个标签，就不再需要使用其他的任何插件了，只要使用支持 HTML5 的浏览器就可以了。    语法：    &lt;audio  src=""&gt;    您的浏览器不支持audio标签！    &lt;/audio&gt;    通过这种方法，可以把指定的音...
HTML5参考手册之视频/音频
在代码身上，用心去飞翔
12-03 1380
HTML5 视频和音频的 DOM 参考手册 HTML5 DOM 为 和 元素提供了方法、属性和事件。 这些方法、属性和事件允许您使用 JavaScript 来操作 和 元素。 HTML5 Audio/Video 方法 方法 描述 addTextTrack() 向音频/视频添加新的文本轨道 canPlayTy
video和audio标签的下载按钮
最新发布
08-31
video和audio标签在谷歌浏览器上自带下载按钮。如果你不想显示下载按钮，可以通过在标签上添加controlsList="nodownload"来关闭下载按钮。比如，在video标签或audio标签上添加controlsList="nodownload"属性即可。示例如下： <video src="videoUrl" controlsList="nodownload" controls="controls"></video> <audio src="audioUrl" controlsList="nodownload" controls="controls"></audio> 这样做可以禁用视频或音频标签的下载按钮，让用户无法下载媒体文件。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [关于HTML5的audio标签和video标签删除下载图标](https://blog.csdn.net/rocling/article/details/81949028)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [【JavaScript源代码】jQuery实现简单弹幕制作.docx](https://download.csdn.net/download/mmoo_python/72280121)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值