多媒体编程

路遥

2025年01月16日📖 4 分钟

LIKE.TG | 发现全球营销软件&服务汇聚顶尖互联网营销和AI营销产品，提供一站式出海营销解决方案。唯一官网：www.like.tg

多媒体和图形编程

这个属于在客户端生成图片，可以减少服务器的压力

脚本化图片

web页面使用img元素，嵌入图片。

img元素可以通过控制src属性来操控img。

一个栗子，鼠标经过的时候，改变图片

当鼠标经过的时候，会触发两个事件，分别是onmouseover以及onmouseout两个

html如下

这是一个模拟图片翻转的dome

js如下

// 获取元素 let img = document.getElementsByTagName("img")[0] // 绑定事件 img.addEventListener(onmouseover, () => { this.src="./images/help_rollover.gif"; }) img.addEventListener(onmouseout, () => { this.src="./images/help.gif"; }) img.addEventListener(onclick, () => { this.src="./images/help_onlick.gif"; })

由于要实现图片翻转，需要较高的响应度，此时需要进行缓存，new一个Image对象创建一个HTMLImageElement对象实例

文档 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLImageElement/Image

即创建一个对象用来暂时储存图片。

let myImage = new Image(10, 200); // 设置缓存的图片大小 myImage.src="./picture.jpg"; // 设置缓存的图片位置 document.body.appendChild(myImage) // 添加一个子节点 // 等价于 let img = "" document.body.appendChild(img);

使用的是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()函数

例如

new Audio("./chime.wav").play(); // 载入并播放声音效果

这是音频的api，视频没有这个api

类型选择和加载

使用的是canPlayType进行的

原型为 HTMLMediaElement.canPlayType()

能播放返回一个真值，不能播放返回一个假值

let a = new Audio(); if (a.canPlayType("audio/wav")) { a.src="./soundeffect.wav"; a.play(); // 进行播放 }

文档 https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLMediaElement/canPlayType

控制播放

控制媒体播放使用的是play()和pause()方法用来控制和暂停媒体的播放

// 文档载入完成后，开始播放背景音乐 window.addEventListener("load", () => { document.getElementById("music").play(); }, false);

通过设置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生态链-全球资源互联社区】连接全球出海营销资源。