优雅的JavaScript-多媒体详解

来源：互联网发布：谛听知乎编辑：程序博客网时间：2024/06/01 08:35

多媒体

音频：audio视频：video

音频：

audio：标签属性属性                 值            描述atuoplay        atuoplay       如果出现该属性，则音频在就绪后会马上播放controls        controls        则向用户显示控件，如：播放按钮loop            loop           则每当音频结束后会重新开始播放src             url            表示音频播放的URL地址muted           muted          规定音频输出被静音preload        preload            表示音频在页面上加载时进行加载，并且准备播放audio对象方法：    方法               描述    addtextTrack()     表示向音频添加文本轨道    canplayType()      检查浏览器是否能够播放指定的音频文件    fastSeek()         表示在音频播放器中指定播放时间    getStartDate()     返回新的date对象，表示当前时间偏移量    load（）            重新加载音频元素    play（）            开始播放音频    pause（）           暂停当前播放的音频

视频：video

<video>标签属性属性           值                 描述autoplay      autoplay     表示视频在就绪后会立即播放、controls      controls     表示显示控件，如：暂停按钮height         pixeis      表示播放器的高度loop          loop         表示当媒介文件完成播放后再次开始播放muted        muted         表示在视频输出音频时被静音poster       URL           表示视频下载时显示的图像preload     preload        表示视频在页面中加载时进行加载，并准备播放src          url           表示视频播放的URL地址width        pixies        表示播放器的宽度<video>对象方法：   方法                 描述   addTextTrack()      向视频里添加文本轨迹   canplayType()       表示浏览器是否能够播放视频的类型   load（）           重新加载视频元素   play（）            开始播放视频   pause（）          暂停当前能播放的视频多媒体标签的方法：    play():开播放音频和视频    pause()：暂停当前播放音频和视频    muted（）：设置返回音频或者视频是否静音    volume()：设置返回音视频的音量    currentTime():设置或返回音视频中当前播放的位置（以秒为单位）    duration():返回当前音频和视频的长度（以秒为单位）

案例：播放器

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <style type="text/css">            div{                width: 80%;                margin: 0 300px;            }        </style>    </head>    <body>        <div id="wrappoer">            <video src="mov_bbb.mp4" id="video"             controls="controls"             width="500px"             height="500px">                            </video>                    </div>        <div id="content">            <input type="button" name="playButton"             id="playButton" value="播放" onclick="play()"/>            <input type="button" name="pauseButton"             id="pauseButton" value="暂停" onclick="pause()"/>            <input type="button" name="mute"             id="mute" value="静音" onclick="mute()"/>            <input type="button" id="big" value="全屏"/>            <span>播放进度</span>            <progress value="0" id="progress"></progress>            <span>音量</span>            <input type="range" id="ran" value="50"             min="0" max="100" onchange="setVolumn()"/>        </div>    </body>    <script type="text/javascript">        var video = document.getElementById("video");        var playButton = document.getElementById("playButton");        var pauseButton = document.getElementById("pauseButton");        var progress = document.getElementById("progress");        var ran = document.getElementById("ran");        var big = document.getElementById("big");        big.onclick=function(){            // video.webkitRequestFullScreen() //兼容谷歌和safrai            video.mozRequestFullScreen()  //兼容火狐        }        var vol;        function play(){            video.play();            playButton.disabled = true;            pauseButton.disabled = false;            setInterval("pro()",100);        }        function pro(){            progress.max = video.duration;            progress.value = video.currentTime;        }        function pause(){            video.pause();            playButton.disabled = false;            pauseButton.disabled = true;        }        //设置静音        function mute(){            if (video.muted == false) {                vol = ran.value;                ran.value = 0;                video.muted = true;            } else{                video.muted = false;                ran.value = vol;            }        }        //设置音量        video.volume = ran.value/100;        function setVolumn(){            video.volume = ran.value/100;        }    </script></html>

阅读全文

0 0