h5-实现播放功能

时间：2023-04-05 15:37:02 HTML5

使用html+js+css实现播放器的简单功能我们在页面开发过程中会遇到需要在页面上播放视频。通常我们使用成熟的视频播放插件来处理比如：video.js。但是，为了我们个人的成长，我们也需要了解如何实现一个简单的h5播放器功能。实现一个播放功能通常包括：video标签使用模拟视频进度条控制播放暂停控制音量快进快退布局

?10s25s?

样式//.scsshtml{box-sizing:border-box;}*,*:before,*:after{box-sizing:inherit;}body{background:#fff;最小高度：100vh；背景尺寸：封面；显示：弹性；对齐项目：居中；正义tify-内容：中心；保证金：0；填充：0;}.player{宽度：750px;边框：2px实心#000；位置：相对；字体大小：0；溢出：隐藏；.player_video{宽度：100%；}&:fullscreen{最大宽度：无；宽度：100%；}&:-webkit-full-screen{最大宽度：无；宽度：100%；}&:hover.progress{高度：15px；}&:hover.player_controls{transform:translateY(0);}}.player_controls{显示：flex;位置：绝对；底部：0；宽度：100%；变换：translateY(100%)translateY(-5px);过渡：全部0.3s；弹性包装：包装；背景：rgba(0,0,0,0.7);&>*{弹性：1;}.player_button{背景：无；边界：0；大纲：无；行高：1；颜色：#fff；文本对齐：居中；填充：0；游标：指针；最大宽度：50px；&:focus{边框颜色：#ffc600;}}.player_range{宽度：10px；高度：30px；}。进步{弹性：10；位置：相对；显示：弹性；弹性基础：100%；高度：5px；过渡：高度0.3s；背景：rgba(0,0,0,0.5);游标：ew-resize；.progress_fill{//宽度：10%；背景：#ffc600；弹性：0；弹性基础：10%；}}}//进度条input[type='range']{-webkit-appearance:none;背景：透明；宽度：100%；边距：05px；&:focus{大纲：无；}&::-webkit-slider-runnable-track{宽度：100%；高度：8.4px；游标：指针；框阴影：1px1px1pxrgba(0,0,0,0),001pxrgba(13,13,13,0);背景：rgba（255、255、255、0.8）；边框半径：1.3px；边框：0.2px实心rgba(1,1,1,0);}&::-webkit-slider-thumb{高度：15px；宽度：15px；边界半径：50px；背景：#ffc600；游标：指针；-webkit外观：无；边距顶部：-3.5px；盒子阴影：002pxrgba(0,0,0,0.2);}&:focus::-webkit-slider-runnable-track{背景：#bada55;}&::-moz-range-track{宽度：100%；高度：8.4px；游标：指针；框阴影：1px1px1pxrgba(0,0,0,0),001pxrgba(13,13,13,0);背景：#ffffff；边框半径：1.3px；边框：0.2px实心rgba(1,1,1,0);}&::-moz-range-thumb{box-shadow:000rgba(0,0,0,0),000rgba(13,13,13,0);高度：15px；宽度：15px；边界半径：50px；背景：#ffc600；游标：指针；}}脚本constplayer=document.querySelector('.player');constvideo=document.querySelector('.player_video');consttoggle=document.querySelector('.toggle');//播放或暂停functiontoggleVideo(){constmethods=video.paused?'播放'：'暂停';视频[方法]（）；}functionupdateButton(){constimage=this.paused？'?'：'??'；toggle.textContent=图片；}//控制播放video.addEventListener('click',toggleVideo);video.addEventListener('play',updateButton);video.addEventListener('暂停',updateButton);toggle.addEventListener('点击',toggleVideo);总结学习input[type="range"]模拟进度条复习js控件拖动复习flex基础

上一篇：在js文件中使用elementUi报错TypeError-_this10.$messageisnotafunction

下一篇：数码照片Exif-方向自动校正解决方案

h5-实现播放功能相关文章