当前位置： 首页 > article >正文

多媒体API

article 2024/11/15 4:14:45

私人博客

许小墨のBlog —— 菜鸡博客直通车

系列文章完整版，配图更多，CSDN博文图片需要手动上传，因此文章配图较少，看不懂的可以去菜鸡博客参考一下配图！

系列文章目录

前端系列文章——传送门
后端系列文章——传送门

文章目录

  • 私人博客
  • 系列文章目录
    • 多媒体标签
      • video
      • audio
    • 多媒体标签的API
    • 自定义多媒体控件
    • 注

多媒体标签

video

只接受几种视屏格式：ogg、mp4、avi

基本使用：

<video src="视屏文件路径"></video>
<!-- 兼容写法 -->
<video>
    <source src="路径1" type="video/mp4"></source>
    <source src="路径2" type="video/ogg"></source>
    <source src="路径3" type="video/avi"></source>
</video>

controls属性，出现默认的控制面板

autoplay属性，自动播放

loop属性，循环播放

width和height属性，用来设置视屏可视区域的尺寸，但是宽和高一直会保持等比，所以设置一个就行了，如果都设置了，会出现黑边，但可视区域是等比的

audio

只接受ogg和mp3格式，使用方式和video是一样的

<audio src="视屏文件路径"></audio>
<!-- 兼容写法 -->
<audio>
    <source src="路径1" type="audio/mp3"></source>
    <source src="路径2" type="audio/ogg"></source>
</audio>

controls属性，出现默认的控制面板

autoplay属性，自动播放

loop属性，循环播放

多媒体标签的API

在谷歌浏览器中，默认不能自动播放，默认直接调用play方法播放，需要一个自定义按钮来解决或设置video静音

/* 方法 */
video/audio.play() // 播放
video/audio.pause() // 暂停
/* 属性 */
video.duration // 视屏总时长
video.muted // 设置媒体静音，值为true或false，获取媒体是否静音
video.volume // 获取媒体当前声音(0~1)，设置声音(0~1)
video.currentTime // 获取媒体当前时间，设置当前时间，单位秒
video/audio.paused // 查看媒体是否暂停
video/audio.playbackRate // 获取/设置播放倍速
/* 事件 */
loadstart：视屏开始加载时触发
progress：浏览器正在下载视屏时触发 - 相当于在加载
canplay：媒体加载完毕，可以播放的时候触发
play：视屏正在播放的时候触发
pause：视屏暂停的时候触发
seeking：视屏开始要跳到新位置的时候触发
seeked：视屏已经跳到新位置的时候触发
waiting：视屏加载等待时触发
timeupdate：只要播放时间更改就会触发
ended：媒体播放结束时触发
error：视屏播放错误时触发
volumechange：视屏音量改变时触发
ratechange：视屏播放速度更改时触发

自定义多媒体控件

布局

<div class="media">
    <div class="playOrPause">
        <i class="iconfont icon-zanting"></i>
    </div>
    <div class="time">
        <span class="currentMinute">00</span>
        :
        <span class="currentSecond">00</span>
        /
        <span class="durationMinute">00</span>
        :
        <span class="durationSecond">00</span>
    </div>
    <div class="playRange">
        <div class="currentRange"></div>
        <div class="playBtn"></div>
    </div>
    <div class="volume">
        <div class="volumeRange">
            <div class="currentVolume"></div>
            <div class="volumeBtn"></div>
        </div>
        <i class="iconfont icon-volume"></i>
    </div>
</div>

样式

.media{
    width: 800px;
    height: 50px;
    border:3px solid #bbb;
    margin:300px auto;
}
.media>div{
    float:left;
    line-height: 50px;
    margin:0 10px;
}
.media>div.playRange{
    width: 200px;
    height: 6px;
    background-color: #333;
    margin:22px 10px;
    border-radius:3px;
    position: relative;
}
.media>div.playRange .currentRange{
    width: 100px;
    height: 6px;
    background-color: rgb(9, 143, 153);
    position:absolute;
    left: 0;
    top: 0;
}
.media>div.playRange .playBtn{
    width: 20px;
    height: 20px;
    background-color:rgb(9, 143, 153);
    border-radius:50%;
    position: absolute;
    left: 90px;
    top: -7px;
}
.media .volume{
    position:relative;
}
.media .volumeRange{
    width: 4px;
    height: 100px;
    background-color: #333;
    border-radius:2px;
    position:absolute;
    top:-100px;
    left: 10px;
    display:none;
}
.media .volumeRange .currentVolume{
    width: 4px;
    height: 50px;
    background-color: blue;
    border-radius:2px;
    position:absolute;
    left: 0;
    bottom:0;
}
.media .volumeRange .volumeBtn{
    width: 15px;
    height: 15px;
    border-radius:50%;
    background-color: blue;
    position:absolute;
    left: -5px;
    bottom:40px;
}
.media i{
    font-size: 24px;
}

js效果：

// 控制音量的面板显示隐藏
$('.media .volume').hover(function(){
    $(this).find('.volumeRange').show()
},function(){
    $(this).find('.volumeRange').hide()
})

// 点击切换小图标
$('.media .playOrPause i').click(function(){
    if($(this).hasClass('icon-bofang')){
        $(this).removeClass('icon-bofang').addClass('icon-zanting')
        // 多媒体播放
        $('audio')[0].play()
    }else{
        $(this).removeClass('icon-zanting').addClass('icon-bofang')
        // 多媒体暂停
        $('audio')[0].pause()
    }
})
$('.media .volume i').click(function(){
    if($(this).hasClass('icon-volume')){
        $(this).removeClass('icon-volume').addClass('icon-jingyin')
        // 让多媒体静音
        $('audio')[0].muted = true
        // 让音量小球下来
        $('.currentVolume').height(0)
        console.log(-$('.volumeBtn').height()/2)
        $('.volumeBtn').css('top',$('.volumeRange').height()-$('.volumeBtn').height()/2 + "px")
    }else{
        $(this).removeClass('icon-jingyin').addClass('icon-volume')
        // 取消静音
        $('audio')[0].muted = false
    }
})
// 拖拽播放进度
$('.playRange').mousedown(function(e){
    // 让小球过来 - 获取光标按下的位置，计算小球的left
    var x = e.pageX;
    var left = x - $('.playBtn').width()/2;
    $('.playBtn').offset({left})
    var width = $('.playBtn').position().left + $('.playBtn').width()/2
    $('.currentRange').width( width )
    // // 根据当前拖拽好的位置设置多媒体
    // // 比例 = 当前播放过的进度条长度 / 进度条总长度
    var percent = width / $('.playRange').width()
    // 当前播放时长 = 总时长*比例
    var duration = $('audio')[0].duration;
    var currentTime = percent * duration;

    $('audio')[0].currentTime = currentTime;
    // $('audio')[0].pause()
    // 移动
    $(this).mousemove(function(e){
        // 让小球过来 - 获取光标按下的位置，计算小球的left
        var x = e.pageX;
        var left = x - $('.playBtn').width()/2;
        $('.playBtn').offset({left})
        var width = $('.playBtn').position().left + $('.playBtn').width()/2
        $('.currentRange').width( width )
        $('audio')[0].pause()
        $('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
    })
})
$('.playRange').mouseup(function(e){
    $('.playRange').off('mousemove')
    var width = $('.currentRange').width()
    // 根据当前拖拽好的位置设置多媒体
    // 比例 = 当前播放过的进度条长度 / 进度条总长度
    var percent = width / $('.playRange').width()
    // 当前播放时长 = 总时长*比例
    var duration = $('audio')[0].duration;
    var currentTime = percent * duration;
    $('audio')[0].currentTime = currentTime;
    $('audio')[0].play()
    $('.media .playOrPause i').removeClass('icon-bofang').addClass('icon-zanting')
})

// 拖拽音量
$('.volumeRange').mousedown(function(e){
    // 让小球过来 - 获取光标按下的位置，计算小球的left
    var y = e.pageY;
    var top = y - $('.volumeBtn').width()/2
    $('.volumeBtn').offset({top})
    $('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
    // 计算音量的比例
    var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
    $('audio')[0].volume = volume

    $(this).mousemove(function(e){
        var y = e.pageY;
        var top = y - $('.volumeBtn').width()/2
        $('.volumeBtn').offset({top})
        $('.currentVolume').height( $('.volumeRange').height() - $('.volumeBtn').position().top - $('.volumeBtn').height()/2 )
        // 计算音量的比例
        var volume = ($('.currentVolume').height() / $('.volumeRange').height()).toFixed(1)-0
        $('audio')[0].volume = volume
    })
})
$(document).mouseup(function(e){
    $('.volumeRange').off('mousemove')
})

// 当多媒体加载完成的时候获取多媒体的播放时长
$('audio')[0].addEventListener('canplay',canplay)
function canplay(){
    var duration = this.duration; // 秒
    // 换算成分钟和秒
    var minute = parseInt(duration/60)
    var second = parseInt(duration%60);
    minute = minute<10?'0'+minute:minute;
    second = second<10?'0'+second:second;
    $('.durationMinute').text(minute)
    $('.durationSecond').text(second)
    // 将播放进度小球放到0的位置
    $('.playBtn').css('left',-$('.playBtn').width()/2 + "px")
    $('.currentRange').width(0)
    // 将音量设置在最顶端
    $('.volumeBtn').css('top',-$('.volumeBtn').height()/2 + "px")
    $('.currentVolume').height($('.volumeRange').height())
}

// 正在播放过程中获取当前播放的时长
$('audio')[0].addEventListener('timeupdate',timeupdate)
function timeupdate(){
    // 获取 当前时长
    var currentTime = this.currentTime;
    var minute = parseInt(currentTime/60)
    var second = parseInt(currentTime%60);
    minute = minute<10?'0'+minute:minute;
    second = second<10?'0'+second:second;
    $('.currentMinute').text(minute)
    $('.currentSecond').text(second)
    // 计算当前播放过多少的比例
    var duration = this.duration; 
    var percent = currentTime / duration;
    // 计算播放过的进度条的长度
    var width = $('.playRange').width() * percent;
    $('.currentRange').width(width)
    $('.playBtn').css('left',width-$('.playBtn').width()/2 + "px")
}

// 多媒体播放结束
$('audio')[0].addEventListener('ended',ended)
function ended(){
    $('.media .playOrPause i').removeClass('icon-zanting').addClass('icon-bofang')
}

注

本博文缺失大量图片，严重影响内容完整性以及阅读体验，完整内容请前往本人菜鸡博客——许小墨のBlog


http://www.kler.cn/a/17488.html

相关文章：

  • SQL，力扣题目1127， 用户购买平台
  • ios swift开发--ios远程推送通知配置
  • PostgreSQL分区表：基础语法与运维实践
  • TortoiseSVN提示服务器凭证检核错误:站点名称不符
  • WebSocket和HTTP协议的性能比较与选择
  • 十三、注解配置SpringMVC
  • Mysql 设置 sort_buffer_size
  • Lenovo MORFFHL鼠标对码教程
  • 【软考备战·希赛网每日一练】2023年5月2日
  • 卷积池化后的特征图尺寸计算
  • 【Python】Pandas的一系列经典操作（非常实用）
  • 阿里云Alibaba Cloud Linux镜像系统介绍及常见问题解答FAQ
  • Scrum敏捷开发和项目管理流程及工具
  • 量子退火Python实战（3）：投资组合优化（Portfolio） MathorCup2023特供PyQUBO教程
  • 【五一创作】ERP实施-委外业务-委外采购业务
  • Log4j.properties配置详解
  • 代码随想录复习 203 移除链表元素
  • nssctf web （3）
  • 八股+面经
  • 一个go http和grpc客户端库
  • Zigbee 无线串口通信模块( DL-22 )
  • 【Python入门篇】——Python基础语法（标识符与运算符）
  • 文献集锦 | 非因生物空间多组学技术在头颈部肿瘤中的研究策略
  • 7.3 有源滤波电路（1）
  • Springcloud--docker快速入门
  • k8s DCGM GPU采集指标项说明