多媒体编程

Kosmos 发布于2019-08-23 12:15 / 2323人阅读

摘要：多媒体和图形编程这个属于在客户端生成图片，可以减少服务器的压力脚本化图片页面使用元素，嵌入图片。表示在浏览器中是否显示控件为显示，为隐藏，查询媒体状态他们有一些只读的属性，描述当前的状态。

多媒体和图形编程
这个属于在客户端生成图片，可以减少服务器的压力

脚本化图片

web页面使用img元素，嵌入图片。
img元素可以通过控制src属性来操控img。
一个栗子，鼠标经过的时候，改变图片

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

html如下




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

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

由于标准的执行问题，所以使用source标签实现兼容
文档 https://developer.mozilla.org...
下方是一个兼容的实现

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...

控制播放

控制媒体播放使用的是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

GPU云服务器云服务器多媒体多媒体技术多媒体开发多媒体文件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98200.html

7月编程语言排行榜来了，为什么不同媒体报道的结果不一样？

摘要：排行榜编程语言排行榜是编程语言流行趋势的一个指标，每月更新，这份排行榜排名基于互联网有经验的程序员课程和第三方厂商的数量。官方地址总结由于这两个榜单的依据不同，所以榜单结果出现不同是非常正常的现象。在程序员的世界里一直流传着这样的一个笑话：某女：你能让这个论坛的人都吵起来，我今晚就跟你走。某软件工程师：PHP是最好的语言！某论坛真的就炸锅了，各种吵架……某女：服了你了，我们走吧，你...

王笑朝 2019-08-16 18:37 评论0 收藏0
JavaScript HTML5脚本编程——“媒体元素”的注意要点

摘要：事件除了大量属性之外，这两个媒体元素还可以触发很多事件。下表列出了媒体元素相关的事件。这两个媒体元素都有一个方法，该方法接收一种格式编解码器字符串，返回或空字符串。 audio和video元素的用法如下：不支持音频不支持视频因为并非所有浏览器都支持所有媒体格式，所以可以指定多个不同的媒体来源。为此，不用在标签中指定src属性，而是要像下面这样使用一或多个元素。 ...

baoxl 2019-08-19 17:37 评论0 收藏0
Python将被加入高考科目？你怎么看？

摘要：浙江省教育厅基教处相关负责人也表示，目前为止，还没有接到下半年开始使用新教材的通知。人生苦短，赶紧用起吧，大潮来袭，还在等什么原文链接将被加入高考科目你怎么看原文链接开发者交流平台，没有办法放链接为了不侵权，把作者的公众号联系方式放在这里。今天看到这样的一则新闻：不禁感叹，人工智能这股风来的太快，已经掀起全民学习Python的浪潮。 2017年中观察：看上去这个大纲内容基本是这样了，...

Yujiaao 2019-07-30 15:06 评论0 收藏0
沃土前端系列 - HTML常用标签

摘要：由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。是的缩写，中文的意思是超文本标记语言，它是制作网页的标准语言。 html是什么 HTML是Hyper Text Markup Language的缩写，中文的意思是超文本标记语言，它是制作网页的标准语言。由于网页中不仅包含普通文本，还包含超文本，故被称作超文本描述语言。那什么是超文本呢？所谓超文本，就是指图像、视频、动画、...

lbool 2019-08-02 10:34 评论0 收藏0