原生h5+css3 实现简单视频播放器组件

最新推荐文章于 2024-06-08 11:41:27 发布
最新推荐文章于 2024-06-08 11:41:27 发布
阅读量4.3k 收藏 22
点赞数 2
分类专栏： 前端小案例 文章标签： h5 css3 视频播放器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rufeike/article/details/102655463
版权

视频播放器组件案例

实现效果

等待图片
效果1效果2

实现功能

  • 全屏切换
  • 进度条点击跳播
  • 音量点击设置大小

涉及知识点

  • video对象属性

    • .duration 获取视频总长度（秒）
    • .currentTime 当前播放时间（秒）
    • .volume 获取音量或设置音量 （值0-1)
    • .paused 是否暂停状态 （true/false)

  • video 对象方法

    • .play() 播放
    • .pause() 暂停

  • video 对象事件

    • .oncanplay 视频资源可以播放时触发

    • .ontimeupdate 视频播放过程中或时间更改时触发

    • .onended 视频播放完毕后

  • 注意点

    • 进度条（音量控制条） 由3层div组成，控制层，当前时间层和总时长层，叠加在一起，最上层用来点击触发事件
    • 火狐上无法监控oncanplay()方法，暂未解决 。在谷歌上运行效果OK

案例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <title>自定义视频播放器</title>
    <style>
        *{box-sizing: border-box}
        .player{
            width:970px;
            height:670px;
            margin:0 auto;
            background-color: #222;
            padding:10px;
            -moz-user-select:none; /* Firefox私有属性 */
            -webkit-user-select:none; /* WebKit内核私有属性 */
            -ms-user-select:none; /* IE私有属性(IE10及以后) */
            -khtml-user-select:none; /* KHTML内核私有属性 */
            -o-user-select:none; /* Opera私有属性 */
            user-select:none; /* CSS3属性 */
        }
        .show{
            text-align: center;
            height: 600px;
            background: #333;
            background:url('./public/images/loading.gif') center center;
            background-size: contain;
        }
        video{
            display: none;
            width:auto;
            max-width: 100%;
        }

        .controller{
            color:#fff;
            padding:15px 0;
        }
        .controller_tool{
            float:left;
            text-align: center;
            cursor:pointer;
        }
        .player_btn{
            width:50px;
        }
        .pull_btn{
            float:right;
            width:50px;
        }
        .progress{
            height:6px;
            border-radius: 2px;
            margin-top:8px;
        }
        .total_progress{
            width:650px;
            background-color:#666;
        }
        .current_progress{
            position:absolute;
            width:0px;
            background-color:yellowgreen;
        }
        .bar{
            position:absolute;
            width:650px;
            z-index: 99;
        }
        .time_box{
            margin-left:15px;
            cursor:default;
        }
        .volume_box{
            position:relative;
            width:40px;
            padding:0 10px;
        }
        .volume_proress_now {
            border-radius: 4px;
            top:-30px;
            left:16px;
            position:absolute;
            width:6px;
            height:30px;
            background-color: yellowgreen;
        }
        .volume_proress{
            border-radius: 4px;
            top:-60px;
            left:16px;
            position:absolute;
            width:6px;
            height:60px;
            background-color: #666;
        }
        .volume_proress_bar{
            border-radius: 4px;
            top:-60px;
            left:16px;
            position:absolute;
            width:6px;
            height:60px;
        }
        .volume_bar_box{
            display: none;
        }
    </style>
</head>
<body>
<main>
    <div class="player">
        <div class="show">
            <video id="my_video" height="100%" src="./public/media/1.mp4"></video>
            <div class="loading"></div>
        </div>
        <div class="controller">
            <div class="controller_tool player_btn"><i class="fa fa-play" aria-hidden="true"></i></div>
            <div class="controller_tool player_progress">
                <div class="progress bar"></div>
                <div class="progress current_progress"></div>
                <div class="progress total_progress"></div>
            </div>
            <div class="controller_tool time_box">
                <span id="current_time">00:00:00</span>
                /
                <span id="total_time">00:00:00</span>
            </div>
            <div class="controller_tool volume_box">
                <div class="volume_bar_box">
                    <div class="volume_proress"></div>
                    <div class="volume_proress_now"></div>
                    <div class="volume_proress_bar"></div>
                </div>
                <i class="fa fa-volume-up" aria-hidden="true"></i>
            </div>
            <div class="controller_tool pull_btn"><i class="fa fa-arrows-alt" aria-hidden="true"></i></div>
        </div>
    </div>
</main>
<script>
    window.onload=function(){
        var video = document.querySelector('#my_video');
        //视频可以播放时，初始化控制面板上的数据
        video.oncanplay=function(){
            //默认为等待图标 显示视频内容
            video.style.display='inline-block';
            //设置默认音量
            video.volume = 0.5;
            //获取视频总时长
            var total_time=formatTime(video.duration);
            document.querySelector('#total_time').innerHTML=total_time;
        };

        //视频在播放过程中更改播放进度条
        video.ontimeupdate = function(){
            var current_time = video.currentTime;
            var total_time = video.duration;
            document.querySelector('#current_time').innerHTML=formatTime(current_time);
            //进度百分比
            var w=document.querySelector('.total_progress').clientWidth;
            document.querySelector('.current_progress').style.width=(current_time/total_time)*w+'px';
        }

        //播放完毕的时候，把播放时间回到初始位置
        video.onended = function(){
            video.currentTime = 0;
            document.querySelector('.player_btn i').classList.remove('fa-stop');
            document.querySelector('.player_btn i').classList.add('fa-play');
        }


        //点击进度条进行跳播
        document.querySelector('.bar').onclick=function(e){
            //获取总长度
            var w = this.clientWidth;
            //获取鼠标偏移量
            var c_w = e.offsetX;

            //根据偏移量获取总时间的百分比
            var now_time = video.duration * (c_w/w);
            video.currentTime = now_time;

        }

        //控制音量组件显示/隐藏
        document.querySelector('.fa-volume-up').onclick = function(e){
            if(this.classList.contains('active')){
                this.classList.remove('active');
                document.querySelector('.volume_bar_box').style.display='none';
            }else{
                this.classList.add('active');
                document.querySelector('.volume_bar_box').style.display='block';
            }

            //阻止冒泡事件
            e.stopPropagation();
            e.preventDefault();
        }

        //收起音量设置控制条
        document.onclick = function(){
            document.querySelector('.fa-volume-up').classList.remove('active');
            document.querySelector('.volume_bar_box').style.display='none';
        }

        //设置音量大小
        document.querySelector('.volume_proress_bar').onclick = function(e){
            var h = this.clientHeight;
            var c_h=h-e.offsetY;
            //设置音量
            video.volume = c_h/h;
            //设置对应的音量高度
            document.querySelector('.volume_proress_now').style.height=c_h+'px';
            document.querySelector('.volume_proress_now').style.top=-c_h+'px';
            e.stopPropagation();
            e.preventDefault();
        }

        // 点击播放时
        document.querySelector('.player_btn').onclick=function(){
            if(video.paused){
                video.play();
                document.querySelector('.player_btn i').classList.remove('fa-play');
                document.querySelector('.player_btn i').classList.add('fa-stop');
            }else{
                video.pause();
                document.querySelector('.player_btn i').classList.remove('fa-stop');
                document.querySelector('.player_btn i').classList.add('fa-play');
            }
        }

        //全屏切换
        document.querySelector('.pull_btn').onclick=function(){
            var player=document.querySelector('.player');
            var flag = document.fullscreenElement || document.webkitFullscreenElement ||document.mozFullScreenElement ||document.msFullscreenElement ||document.oFullscreenElement;

            if(flag){//全屏状态
                //兼容性问题
                if(document.cancelFullScreen){
                    document.cancelFullScreen();
                }else if(document.webkitCancelFullScreen){//chome
                    document.webkitCancelFullScreen();
                }else if(document.mozCancelFullScreen){//fox
                    document.mozCancelFullScreen();
                }else if(document.msCancelFullScreen){//ie
                    document.msCancelFullScreen();
                }else if(document.oCancelFullScreen){//opera
                    document.oCancelFullScreen();
                }

                //窗口大小设置
                document.querySelector('.show').style.height=600+'px';
                document.querySelector('.total_progress').style.width=650+'px';

                //切换图标
                document.querySelector('.pull_btn i').classList.remove('fa-compress');
                document.querySelector('.pull_btn i').classList.add('fa-arrows-alt');
            }else{
                //兼容性问题
                if(player.requestFullScreen){
                    player.requestFullscreen();
                }else if(player.webkitRequestFullScreen){//chome
                    player.webkitRequestFullScreen();
                }else if(player.mozRequestFullScreen){//fox
                    player.mozRequestFullScreen();
                }else if(player.msRequestFullScreen){//ie
                    player.msRequestFullScreen();
                }else if(player.oRequestFullScreen){//opera
                    player.oRequestFullScreen();
                }
                //窗口大小设置
                document.querySelector('.show').style.height=window.outerHeight-40+'px';
                document.querySelector('.total_progress').style.width=window.innerWidth-350+'px';
                //切换图标
                document.querySelector('.pull_btn i').classList.remove('fa-arrows-alt');
                document.querySelector('.pull_btn i').classList.add('fa-compress');
            }
        }

        //解决esc或h5全屏自带的退出无法恢复原大小问题
        window.onresize=function() {
            var flag = document.fullscreenElement || document.webkitFullscreenElement ||document.mozFullScreenElement ||document.msFullscreenElement ||document.oFullscreenElement;
            if (!flag) {
                //窗口大小设置
                document.querySelector('.show').style.height=600+'px';
                document.querySelector('.total_progress').style.width=650+'px';

                //切换图标
                document.querySelector('.pull_btn i').classList.remove('fa-compress');
                document.querySelector('.pull_btn i').classList.add('fa-arrows-alt');
            }
        }
    }



    //时间格式化 参数-秒
    function formatTime(time){
        if(typeof(time)!=="number"){
            return '00:00:00';
        }

        //获取hour
        var hour=parseInt(time/(60*60));
        hour = hour<10?'0'+hour:hour;

        //获取分钟
        var minute=parseInt(time%(60*60)/60);
        minute = minute<10?'0'+minute:minute;

        //获取秒钟
        var second=Math.ceil(time%60);
        second = second<10?'0'+second:second;

        return `${hour}:${minute}:${second}`;
    }
</script>
</body>
</html>
rufeike
关注
  • 2
    点赞
  • 踩
  • 22
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
h5视频播放器样例
07-30
一款h5实现的简单视频播放器。样式可以根据自己需要修改。
一款简约好看的html5音乐播放器,HTML5 之美：推荐9款优秀的 HTML5 音乐播放器
weixin_33729662的博客
06-03 1528
过去，在网页上播放音频都是通过第三方插件来播放的，如 Flash、QuickTime 和Silverlight 等，没有统一的音频播放标准。HTML5 通过 audio 元素来提供在网页中嵌入音频的标准方法，下面这9款 HTML5 音频播放器都是基于 audio 元素开发的，能够帮助你在网页中轻松的嵌入音频。另外推荐：7款很棒的 HTML5 视频播放器。jPlayerjPlayer 一款基于 j...
【前端】h5端好用的播放器探索
最新发布
2301_76933862的博客
06-08 328
集播放http-flv, hls, websocket 于一身的H5视频直播/视频点播播放器, 使用简单, 功能强大；功能说明支持 MP4 播放支持 m3u8/HLS 播放;支持 HTTP-FLV/WS-FLV 播放;支持直播和点播播放;支持播放器快照截图;支持点播多清晰度播放;支持全屏或比例显示;自动检测 IE 浏览器兼容播放;支持重连播放；
h5项目自定义video视频播放组件，可实现拖动进度
weixin_52827704的博客
10-25 851
项目要求不用video播放的自带controls样式，要根据高保真来 可以点击整个屏幕实现暂停或播放操作 代码实现结果： 附上代码： 视频播放组件： <template> <div class="video-play-page"> <video v-if="Object.keys(videoDetail).length" ref="videoPlayer" id="videoElement" :controls="f
vue自定义h5video视频播放器进度条组件，可拖拽、跳转、倍速、全屏
热门推荐
gyw的博客
06-08 1万+
一个进度条组件控制多个视频的播放、进度调整。视频可点击全屏观看
HTML5原生视频播放器组件video的videocontrolslist属性详解
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
11-27 2020
HTML5提供了内置的视频播放控件，其中videocontrolslist是其中一个很有用的属性。videocontrolslist属性可以用于告诉浏览器在视频播放过程中应该显示哪些默认的用户界面控件。下面我们将从几个方面来介绍videocontrolslist的详细使用。
HTML5的Video标签的属性,方法和事件汇总
lxw1844912514的博客
05-26 1793
标签的属性 src ：视频的属性 poster：视频封面，没有播放时显示的图片 preload：预加载 autoplay：自动播放 loop：循环播放 controls：浏览器自带的控制条 width：视频宽度 height：视频高度 html 代码 <<span class="hljs-title" style="color: ...
MUI+APP+H5+CSS
09-29
在MUI框架中，CSS3被广泛应用于实现组件的样式和交互效果，提升用户体验。 结合“HTML5_CSS3_中文参考手册”，我们可以深入学习HTML5和CSS3的语法、特性以及最佳实践，这对于理解和应用MUI框架至关重要。手册可能...
手机H5弹出纯js+css样式制作
12-30
手机H5弹出纯js+css样式制作
vue实现自定义H5视频播放器的方法步骤
12-01
在Vue.js中实现一个自定义的H5视频播放器组件涉及到多个方面，包括HTML5的video元素、事件监听、响应式设计以及Vue的组件化思想。以下是对这个过程的详细说明： 1. **设计阶段**： 在设计阶段，开发者需要规划...
MUI H5+ PhotoSwipe实现图片预览下载示例源码.zip
09-21
首先，MUI（DCloud Mobile UI）是一个专为移动Web应用设计的前端框架，它提供了丰富的组件和样式，以帮助开发者快速构建具有原生App体验的H5页面。MUI的设计理念是简洁、易用，其组件库涵盖了导航、表单、按钮、图片...
H5网页视频播放插件ckplayer.js
11-02
最新版本的ckplayer-x1 直接支持了html5播放m3u8格式的视频，安卓手机上也可以播放，但ios支持不太好，仅供大家参考使用
official_web_copy_redbook:Bootstrap+jQuery+html5+css+javascript；原生开发官网，模仿小红书官网首页
08-04
**Bootstrap** 是一个流行的开源前端框架，它提供了一套预设的 CSS 样式、JavaScript 组件和网格系统，极大地加速了网页开发。在仿小红书首页项目中，Bootstrap 可能被用来快速构建响应式布局，简化栅格设计，并提供...
H5视频播放组件（vue）
le__seul的博客
09-29 1385
使用VUE实现H5视频播放组件
响应式开发HTML5CSS3实现视频播放器的功能案例
weixin_59042297的博客
04-22 3066
1.本文讲解的响应式开发技术（HTML5+CSS3+Bootstrap）的HTML5视频播放器等功能方法的代码，这也是很多教材的一个典型案例；2.本文将讲解涉及到HTML5表单等功能方法的知识点，其它方面会大致讲一下；3.本代码是使用visual Studio Code编写的，其他软件如DW，HBX等都是可以的；4.运行浏览器是谷歌，同时推荐使用谷歌浏览器；5.这个案例是我上学跟老师所讲做出来的，有些地方不是很完美，请见谅也请多赐教，若程序出现问题请指教，我在吸取经验、改正文档；
css3 移动端video视频全屏，横屏展示，适配微信/打包成app
weixin_45282357的博客
03-20 3224
css3 移动端视频全屏，横屏展示，适配微信/打包成app 参考链接： 全屏旋转 https://blog.csdn.net/nidunlove/article/details/51944527 ios进度条滑动方向判断 https://www.cnblogs.com/yiyi17/p/7687273.html 手势滑动屏幕（模拟滑块Slider） 苹果ios下手势滑动屏幕更改视频的播放进度，本人...
CSS音频和视频属性和用法
bananananana_123的博客
03-17 598
1.**object-fit：**该属性用于调整视频元素的内容适应其容器的方式。**contain：**保持视频的宽高比，将视频缩放至完全适应容器，可能会在视频周围留有空白区域。2.**object-position：**该属性用于定义视频元素在容器中的位置。**cover：**保持视频的宽高比，将视频缩放至完全覆盖容器，可能会导致部分视频被裁剪。**fill：**将视频拉伸以填充容器，可能会导致视频的宽高比被破坏。**none：**保持视频的原始大小，可能会导致视频显示超出容器。6.布局调整与层叠效果。
【html+css+js】用前端做一个视频播放器页面
刘佳皓_Leo
09-13 6841
初学前端的可以看一看，能看懂的话证明你前端入门了，如果没有看懂那还需努力。自己学习了两个星期的前端自认为前端不是很难，但是很考验人的设计能力，如果没有很高的审美，也同样做不出优秀的页面。
使用html原生video视频，前端开发学习教程
2401_84097820的博客
04-05 1229
核心竞争力，怎么才能提高呢？成年人想要改变生活，逆转状态？那就开始学习吧~万事开头难，但是程序员这一条路坚持几年后发展空间还是非常大的，一切重在坚持。为了帮助大家更好更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。
写个vue原生兼容安卓和H5的短视频滑动播放器
05-01
好的，下面是一个简单的Vue原生兼容安卓和H5的短视频滑动播放器的实现： 1. 首先需要安装 `vue-touch` 插件，它可以让我们方便地处理触摸事件。可以使用以下命令安装： ``` npm install vue-touch ``` 2. 在Vue组件中引入 `vue-touch` 插件： ```javascript import VueTouch from 'vue-touch'; Vue.use(VueTouch); ``` 3. 定义一个 `SwipePlayer` 组件，该组件包含一个视频播放器和一个滑动条： ```html <template> <div class="swipe-player"> <video :src="source" ref="videoRef"></video> <div ref="sliderRef" class="slider"></div> </div> </template> ``` 4. 在组件的 `mounted` 方法中，初始化滑动条，并添加滑动事件处理程序： ```javascript mounted() { // 初始化滑动条 const slider = this.$refs.sliderRef; slider.style.width = '0%'; // 添加滑动事件处理程序 this.$swipeRight(this.handleSwipeRight); this.$swipeLeft(this.handleSwipeLeft); }, methods: { // 处理向右滑动事件 handleSwipeRight() { const video = this.$refs.videoRef; const slider = this.$refs.sliderRef; // 获取当前视频播放进度 const currentTime = video.currentTime; const duration = video.duration; // 计算新的播放进度 const newTime = Math.max(currentTime - 5, 0); const percent = (newTime / duration) * 100; // 更新视频播放进度和滑动条 video.currentTime = newTime; slider.style.width = `${percent}%`; }, // 处理向左滑动事件 handleSwipeLeft() { const video = this.$refs.videoRef; const slider = this.$refs.sliderRef; // 获取当前视频播放进度 const currentTime = video.currentTime; const duration = video.duration; // 计算新的播放进度 const newTime = Math.min(currentTime + 5, duration); const percent = (newTime / duration) * 100; // 更新视频播放进度和滑动条 video.currentTime = newTime; slider.style.width = `${percent}%`; } } ``` 5. 在 `data` 中定义视频的源地址： ```javascript data() { return { source: 'http://example.com/video.mp4' }; } ``` 6. 最后，样式可以根据需要进行自定义： ```css .swipe-player { position: relative; width: 100%; height: 300px; } .swipe-player video { width: 100%; height: 100%; object-fit: cover; } .swipe-player .slider { position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background-color: #ddd; z-index: 1; } ``` 这样就完成了一个简单的Vue原生兼容安卓和H5的短视频滑动播放器。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值