专栏首页mySoul多媒体编程
原创

多媒体编程

多媒体和图形编程

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

脚本化图片

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

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

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

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

html如下

<!doctype html>
<html>
<head>
    <title>这是一个模拟图片翻转的dome</title>
</head>
<body>
    <img src="images/help.gif">
</body>
</html>

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 = "<img width=100 height=200 src=./picture.jpg>"
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

即使用上方两个标签,可以实现简单的视频和音频的插入

<audio src="background_music.mp3"/>
<video src="news.mov" width=320 height=240/>

使用上方的两个标签实现简单的视频和音频的插入

由于标准的执行问题,所以使用source标签实现兼容

文档 https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/source

下方是一个兼容的实现

<video id="news" width=640 height=480 controls preload>
    <!-- Firefor chrome 支持的web格式 -->
    <source src="news.mp4" type="video/webm">
    <!-- IE和Safair支持的h。264格式 -->
    <source src="news.mp4" type="video/mp4">
    <!-- flash插件用做后备方案 -->
    <object width=640 height=480 type="application/x-hockwave-flash" data="flash_movie_player.swf">
        <!-- 这里的参数配置flash视频播放器 --->
        <!--  文本用做后备内容 --->
        <div>播放器不支持</div>
    </object>
</video>

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

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • css3过渡

    transition 为一个简写属性,是一个transition-property (定义过渡的属性的名称)以及 transition-duration (定义...

    mySoul
  • MyBatis 解析运行原理

    通过new 出一个 SqlSessionFactoryBuilder对象,然后调用build方法.

    mySoul
  • 解释SpringBoot之Ehcache 2.x缓存

    [wp_editor_md_a364d1423e3bdfc4066b7266a02a2393.jpg]

    mySoul
  • Python简单制作GIF

    # _author_ == ‘ljh’ import imageio import glob import re from PIL impor...

    py3study
  • PILLOW中图像mode

    在本地找了jpg的图,convert为不同mode,将不同的图截取做了个脑图,有个直观的感觉吧。

    Dean0731
  • 为你的站点加上“懒加载”——提高用户体验&节省流量

    通常来说,一个正常web页面是由图片和文字以及各种CSS,JS构成,而这其中,拖慢网速的罪魁祸首就是图片。懒加载即将页面中的图片分布加载,边浏览边加载,从而减轻...

    神无月
  • 用100元的支票骗到100万:看看对抗性攻击是怎么为非作歹的

    大数据文摘
  • Linux下启动和停止apache服务

    本文使用的Linux系统为CentOS 7,下面将介绍apache服务的启动、关闭与设置。apache在CentOS 7中一般是默认安装的,而且服务名字为htt...

    Tyan
  • 三行代码把女朋友照片变成了素描图片!人生苦短,爱python多一些

    我们知道图片除了最普通的彩色图,还有很多类型,比如素描,卡通,黑白等等,今天就介绍如何使用python和opencv来实现图片变素描图。

    一墨编程学习
  • MySQL 5.6 插入缓冲测试

    Query OK, 0 rows affected (8 min 23.79 sec)

    用户1148526

扫码关注云+社区

领取腾讯云代金券