多媒体和JavaScript动画

2021-01-19 10:02:26 阅读：232 来源： 互联网

标签：动画 style 多媒体 JavaScript prcss width var 播放

1 多媒体

1.1 基本用法

/* audio */
<audio src="music.mp3"></audio>

/* video */
<video src="movie.mov" width=320 height=240></video>

1.2 兼容用法

/* audio兼容 */
<audio>
    <source src="music.mp3" type="audio/epeg">
    <source src="music.wav" type="audio/x-wav">
    <source src="music.ogg" type="audio/ogg">
</audio>

/* video兼容 */
<video>
    <source src="movie.webm" type="video/webm; codecs='vp8,vorbis'">
    <source src="movie.mp4" type="video/mp4; codecs='avc1.42E01E,mp4a.40.2'">
</video>

/* 兼容性查询 */
var a = new Audio();
a.canPlayType('audio/nav');

多媒体格式兼容性查询：音频audio 视频video

1.3 HTML属性

属性	是否必须	默认值	备注
src	是	无	音视频文件的URL
controls	否	false	向用户显示控件
autoplay	否	false	音视频在就绪后马上播放
loop	否	false	每当音视频结束播放时重新开始播放
preload	否	none	可取值为‘none’、‘metadata’、‘auto’。音视频在页面加载时进行加载，并预备播放。如果使用autoplay，则忽略该属性。

1.4 控制多媒体播放

load()//加载媒体内容
play()//开始播放
pause()//暂停播放
playbackRate//播放速度
currentTime//播放进度
volume//音量
muted//静音

1.5 查询多媒体的状态

paused//暂停
seeking//跳转
ended//播放完成
duration//媒体时长
initialTime//媒体开始时间

1.6 多媒体相关事件

loadstart//开始请求媒体内容
loadmetadata//媒体元数据已经加载完成
canplay//加载了一些内容，可以开始播放
play//调用了play()，或设置了autoplay
waiting//缓冲数据不够，播放暂停
playing//正在播放

其他多媒体相关事件

1.7 web audio API

1.8 多媒体实例

/* audio实例 */
/* video实例 */

2 JS动画

2.1 动画

动画是根据人脑影像残留特点，把一系列的图片按照时间顺序以一定的速度显示出来，就形成了动画。动画如果要流畅的话，要每秒钟30帧以上。

2.2 动画的实现方式

在网络上动画以三种形式存在，分别是gif,flash,CSS3和JS。

其中gif是以图片方式储存的；Flash有点要被淘汰的节奏；CSS3使用还有局限;

2.3 JS动画三要素

对象	属性	定时器
DOM	width height opacity Left	setInterval setTimeout requestAnimationFrame

2.4 Setinterval

/* setInterval */
var intervalID = setInterval(func,delay[,param1,param2,..])
clearInterval(intervalID);
//其中func是执行改变属性操作的函数
//其中delay是触发的时间间隔

2.5 重复的setTimout

/* setTimeout */
var timeoutID = setTimeout(func,[delay,param1,param2,...]);
clearTimeout(timeoutID);
//其中delay为触发时间间隔，默认值为零

2.6 只触发一次requestAnimationFrame(func)

var requestID = requestAnimationFrame(func);
cancelAnimationFrame(requestID);
//间隔时间由显示器的刷新时间决定

2.7 常见动画

形变
位移
旋转
透明度

2.8 动画函数实例

/* 动画函数 */
var animation = function(ele,attr,from,to){
    var distance = Math.abs(to-from);
    var stepLength = distance/100;
    var sign = (to - from)/distance;
    var offset = 0;
    var step = function(){
        var tmpOffset = offset + stepLength;
        if(tempOffset < distance){
            ele.style[attr] = from + tepOffset*sign + 'px';
            offset = tmpOffset;
        }else{
            ele.style[attr] = to + 'px';
            clearInterval(intervalId);
        }
    }
    ele.style[attr] = from + 'px';
    var intervalID = setInterval(step,10);
}

/* 图片轮播 */
//进度条
var process = function(prcsswrap,drtn,intrvl,callback){
    var width = prcsswrap.clientWidth;
    //获取对象
    var prcss = prcsswrap.getElementByClassName('prcss')[0];
    var count = drtn/intrvl;
    var offset = Math.floor(width/count);
    var tmpCurrent = CURRENT;
    //修改属性值
    var step = function(){
        if(temCurrent !== CURRENT){
            prcss.style.width = '0px';
            return;
        }
        var des = getNum(prcss.style.width)+offset;
        if(des < width){
            prcss.style.width = getNum(prcss.style.width) + offset + 'px';
        }else if(des = width){
            clearInterval(intervalId);
            prcss.style.width = '0px';
            PREV = CURRENT;
            CURRENT = NEXT;
            NEXT++;
            NEXT = NEXT%NUMBER;
            if(callback){
                callback();
            }
        }else{
            prcss.style.width = width + 'px';
        }
    }
}

标签：动画,style,多媒体,JavaScript,prcss,width,var,播放
来源： https://www.cnblogs.com/luwanlin/p/14296403.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9