多媒体编程

LIKE.TG | 发现全球营销软件&服务汇聚顶尖互联网营销和AI营销产品,提供一站式出海营销解决方案。唯一官网:www.like.tg
多媒体和图形编程
这个属于在客户端生成图片,可以减少服务器的压力
脚本化图片
web页面使用img元素,嵌入图片。
img元素可以通过控制src属性来操控img。
一个栗子,鼠标经过的时候,改变图片
当鼠标经过的时候,会触发两个事件,分别是onmouseover以及onmouseout两个
html如下
js如下
由于要实现图片翻转,需要较高的响应度,此时需要进行缓存,new一个Image对象创建一个HTMLImageElement对象实例
文档 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/Image
即创建一个对象用来暂时储存图片。
使用的是Image()类,创建对象
其中图片的懒加载可以使用Image类,先缓存图片,等待用户滑到的时候,然后触发事件,将src进行替换。
脚本化音频和视频
h5中引用了两个变迁audio和video两个标签
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/video
即使用上方两个标签,可以实现简单的视频和音频的插入
使用上方的两个标签实现简单的视频和音频的插入
由于标准的执行问题,所以使用source标签实现兼容
文档 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source
下方是一个兼容的实现
Audio构造函数
Audio()构造函数类似Image()函数
例如
这是音频的api,视频没有这个api
类型选择和加载
使用的是canPlayType进行的
原型为 HTMLMediaElement.canPlayType()
能播放返回一个真值,不能播放返回一个假值
文档 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canPlayType
控制播放
控制媒体播放使用的是play()和pause()方法用来控制和暂停媒体的播放
通过设置urrentTime属性进行定点播放,
volume表示播放音量
playbackRate表示播放的速度
如果元素拥有controls属性,会在播放器上显示控件,让用户进行控制播放。
controls表示在浏览器中是否显示控件true为显示,false为隐藏,
查询媒体状态
他们有一些只读的属性,描述当前的状态。
播放器暂停,pause属性值为true
播放器跳转到一个新的播放点,seeking的值为true
如果完全播放完成,ended为true
duration媒体时长
initialTime表示媒体的开始时间
等等还有很多,用的时候现查吧,过一遍,大致知道有这些属性即可
媒体相关事件
会有媒体的相关事件,必须使用addEventListener()方法注册在audio和video元素上,当被请求的时候触发,当被加载的时候触发等等。
下面是svg

LIKE.TG:汇集全球营销软件&服务,助力出海企业营销增长。提供最新的“私域营销获客”“跨境电商”“全球客服”“金融支持”“web3”等一手资讯新闻。
点击【联系客服】 🎁 免费领 1G 住宅代理IP/proxy, 即刻体验 WhatsApp、LINE、Telegram、Twitter、ZALO、Instagram、signal等获客系统,社媒账号购买 & 粉丝引流自助服务或关注【LIKE.TG出海指南频道】、【LIKE.TG生态链-全球资源互联社区】连接全球出海营销资源。
本文由LIKE.TG编辑部转载自互联网并编辑,如有侵权影响,请联系官方客服,将为您妥善处理。
This article is republished from public internet and edited by the LIKE.TG editorial department. If there is any infringement, please contact our official customer service for proper handling.
Server deployment全球论坛人工智能论坛全球峰会发展论坛战略论坛开放论坛程序员论坛互联网峰会科技峰会