优雅的JavaScript-多媒体详解

最新推荐文章于 2024-04-18 09:34:18 发布

熙哲数

最新推荐文章于 2024-04-18 09:34:18 发布

阅读量495

点赞数

分类专栏： JavaScript 文章标签： JavaScript音视频 JavaScript播放器

本文链接：https://blog.csdn.net/sun13921881708/article/details/76154907

版权

JavaScript 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

多媒体


音频：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="播放" οnclick="play()"/>
            <input type="button" name="pauseButton" 
            id="pauseButton" value="暂停" οnclick="pause()"/>
            <input type="button" name="mute" 
            id="mute" value="静音" οnclick="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" οnchange="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.οnclick=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
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
优雅的JavaScript-多媒体详解

多媒体音频：audio视频：video音频：audio：标签属性属性值描述atuoplay atuoplay 如果出现该属性，则音频在就绪后会马上播放controls controls 则向用户显示控件，如：播放按钮loop loop
复制链接

扫一扫

专栏目录