<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>HTML5-Video-Player</title>

    <style type="text/css">

        .videoPlayer{

            border: 1px solid #000;

            width: 600px;

        }

        #video{

            margin-top: 0px;

        }

        #videoControls{

            width: 600px;

            margin-top: 0px;

        }

        .show{

            opacity: 1;

        }

        .hide{

            opacity: 0;

        }

        #progressWrap{

            background-color: black;

            height: 25px;

            cursor: pointer;

        }

        #playProgress{

            background-color: red;

            width: 0px;

            height: 25px;

            border-right: 2px solid blue;

        }

        #showProgress{

            background-color: ;

            font-weight: 600;

            font-size: 20px;

            line-height: 25px;

        }

    </style>

</head>

<body>

<div class="">

    <h1>HTML5_Video_Player</h1>

    <div class="videoPlayer" id="videoContainer">

        <video id="video"

               width="600" height="360"

               preload controls

        >

            <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.mp4" type='video/mp4'>

            <source src="http://nettuts.s3.amazonaws.com/763_sammyJSIntro/trailer_test.ogg" type='video/ogg'>

        </video>

        <div id="videoControls">

            <div id="progressWrap">

                <div id="playProgress">

                    <span id="showProgress">0</span>

                </div>

            </div>

            <div>

                <button id="playBtn" title="Play"> 播放 </button>

                <button id="fullScreenBtn" title="FullScreen Toggle">  全屏 </button>

            </div>

        </div>

    </div>

</div>

<script>

    (function(window, document){

        // 获取要操作的元素

        var video = document.getElementById("video");

        var videoControls = document.getElementById("videoControls");

        var videoContainer = document.getElementById("videoContainer");

        var controls = document.getElementById("video_controls");

        var playBtn = document.getElementById("playBtn");

        var fullScreenBtn = document.getElementById("fullScreenBtn");

        var progressWrap = document.getElementById("progressWrap");

        var playProgress = document.getElementById("playProgress");

        var fullScreenFlag = false;

        var progressFlag;

        // 创建我们的操作对象，我们的所有操作都在这个对象上。

        var videoPlayer = {

            init: function(){

                var that = this;

                video.removeAttribute("controls");

                bindEvent(video, "loadeddata", videoPlayer.initControls);

                videoPlayer.operateControls();

            },

            initControls: function(){

                videoPlayer.showHideControls();

            },

            showHideControls: function(){

                bindEvent(video, "mouseover", showControls);

                bindEvent(videoControls, "mouseover", showControls);

                bindEvent(video, "mouseout", hideControls);

                bindEvent(videoControls, "mouseout", hideControls);

            },

            operateControls: function(){

                bindEvent(playBtn, "click", play);

                bindEvent(video, "click", play);

                bindEvent(fullScreenBtn, "click", fullScreen);

                bindEvent(progressWrap, "mousedown", videoSeek);

            }

        }

        videoPlayer.init();

        // 原生的JavaScript事件绑定函数

        function bindEvent(ele, eventName, func){

            if(window.addEventListener){

                ele.addEventListener(eventName, func);

            }

            else{

                ele.attachEvent('on' + eventName, func);

            }

        }

        // 显示video的控制面板

        function showControls(){

            videoControls.style.opacity = 1;

        }

        // 隐藏video的控制面板

        function hideControls(){

            // 为了让控制面板一直出现，我把videoControls.style.opacity的值改为1

            videoControls.style.opacity = 1;

        }

        // 控制video的播放

        function play(){

            if ( video.paused || video.ended ){

                if ( video.ended ){

                    video.currentTime = 0;

                }

                video.play();

                playBtn.innerHTML = "暂停";

                progressFlag = setInterval(getProgress, 60);

            }

            else{

                video.pause();

                playBtn.innerHTML = "播放";

                clearInterval(progressFlag);

            }

        }

        // 控制video是否全屏，额这一部分没有实现好，以后有空我会接着研究一下

        function fullScreen(){

            if(fullScreenFlag){

                videoContainer.webkitCancelFullScreen();

            }

            else{

                videoContainer.webkitRequestFullscreen();

            }

        }

        // video的播放条

        function getProgress(){

            var percent = video.currentTime / video.duration;

            playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";

            showProgress.innerHTML = (percent * 100).toFixed(1) + "%";

        }

        // 鼠标在播放条上点击时进行捕获并进行处理

        function videoSeek(e){

            if(video.paused || video.ended){

                play();

                enhanceVideoSeek(e);

            }

            else{

                // 这句代码是控制允不允许点击进度条的； 不开启，就禁掉了点击事件快进快退

                enhanceVideoSeek(e);

            }

        }

        function enhanceVideoSeek(e){

            clearInterval(progressFlag);

            var length = e.pageX - progressWrap.offsetLeft;

            var percent = length / progressWrap.offsetWidth;

            playProgress.style.width = percent * (progressWrap.offsetWidth) - 2 + "px";

            video.currentTime = percent * video.duration;

            progressFlag = setInterval(getProgress, 60);

        }

    }(this, document))

</script>

</body>

</html>
// 鼠标在播放条上点击时进行捕获并进行处理

        function videoSeek(e){

            if(video.paused || video.ended){

                play();

                enhanceVideoSeek(e);

            }

            else{

                // 这句代码是控制允不允许点击进度条的； 不开启，就禁掉了点击事件快进快退

                enhanceVideoSeek(e);

            }

        }

主要是上面那个方法的事件控制

html5 vedio 播放器，禁掉进度条快进快退事件的更多相关文章

  1. Android第三方开源SeekBarCompat：音乐类播放器等APP进度条常用

     Android第三方开源SeekBarCompat:音乐类播放器等APP进度条常用 Android平台原生的SeekBar设计简单,然而,比如现在流行的一些音乐播放器的播放进度控制条,如果直接使 ...

  2. 4个小时实现一个HTML5音乐播放器

    技术点:ES6+Webpack+HTML5 Audio+Sass 这里,我们将一步步的学到如何从零去实现一个H5音乐播放器. 首先来看一下最终的实现效果:Demo链接 接下来就步入正题: 要做一个音乐 ...

  3. HTML5项目笔记4：使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  4. HTML5 音频播放器-Javascript代码(短小精悍)

    直接上干货咯! //HTML5 音频播放器 lzpong 2015/01/19 var wavPlayer = function () { if(window.parent.wavPlayer) re ...

  5. Plyr – 简单，灵活的 HTML5 媒体播放器

    Plyr 是一个简单的 HTML5 媒体播放器,包含自定义的控制选项和 WebVTT 字幕.它是只支持现代浏览器,轻量,方便和可定制的媒体播放器.还有的标题和屏幕阅读器的全面支持. 在线演示      ...

  6. 使用Audio API设计绚丽的HTML5音乐播放器

    HTML5 有两个很炫的元素,就是Audio和 Video,可以用他们在页面上创建音频播放器和视频播放器,制作一些效果很不错的应用. 无论是视屏还是音频,都是一个容器文件,包含了一些音频轨道,视频轨道 ...

  7. HTML5矢量实现文件上传进度条

    在HTML中,在文件上传的过程中,很多情况都是没有任何的提示,这在体验上很不好,用户都不知道到时有没有在上传.上传成功了没有,所以今天给大家介绍的内容是通过HT for Web矢量来实现HTML5文件 ...

  8. HTML5音乐播放器（最新升级改造加强版）

    最近么,单位里面么老不顺心的,公司一直催要程序员要PHP,然后本宅好不容易推荐了一个,我日嘞,最后待遇变成1.3,吾师最后也同意1.3W,然后还说要考虑... 尼玛,4年多5年不到一点的工作经验,前端 ...

  9. 简约的HTML5音乐播放器插件

    从我刚开始接触前端的时候就想写一个能播放音乐的小程序,刚开始写的时候虽然可以放,但是确实很慢,很卡,有很多可以优化的地方.最近在前一个版本的基础上重写了一个音乐播放器的插件,速度还可以吧 因为追求简约 ...

随机推荐

  1. widows10 安装1803 版本后不能访问网络上的机器解决方法

    安装Windows10 1803 版本后,发现网络上的机器好多不见了. 使用 ping  可以ping 通,但是访问网络共享提示下面错误. 这个原因是1803 中没有安装 SMB1.0 协议.因为 S ...

  2. python3 函数传参练习 全局变量与局部变量 的理解

    额 还是继续抄一边NLP第二条: 2.一个人不能控制另外一个人   一个人不能改变另外一个人,一个人只能改变自己. 每个人的信念,价值观,规条系统只对本人有效,不应强求别人接守. 改变自己,别人才会有 ...

  3. mysql 8 nodejs连不上

    https://www.jianshu.com/p/bf37e0bc7080 alter user 'root'@'localhost' identified with mysql_native_pa ...

  4. web服务器，验证码，Xftp使用方法

    IIS操作步骤 直接装的wamp 腾讯云主机控制台 安全组里可以配置要开放的端口 关闭防火墙 (C:\wamp\bin\apache\Apache2.4.4) 打开httpd.conf文件 requi ...

  5. Docker 搜索镜像

    文章首发个人网站: https://www.exception.site/docker/docker-search-image 本文中,您将学习 Docker 如何搜索镜像? 一.search 命令 ...

  6. TabTopLayout【自定义顶部选项卡区域（固定宽度且居中）】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 自定义顶部选项卡并居中显示.结合显示/隐藏view的方式实现切换功能(正常情况下可能是切换fragment). 效果图 代码分析 T ...

  7. 深入浅出mongoose

    深入浅出mongoose mongoose是nodeJS提供连接 mongodb的一个库. 此外还有mongoskin, mongodb(mongodb官方出品). 本人,还是比较青睐mongoose ...

  8. knockoutjs data-bind 声明式绑定整理

    一.Visible绑定 1.功能 Visible绑定通过绑定一个值来确定DOM元素显示或隐藏 2.示例 <div data-bind="visible: shouldShowMessa ...

  9. SmartSql 入门

    入门 安装 Install-Package SmartSql Install-Package SmartSql.Schema // 以及相应ADO.NET驱动 从连接字符串创建SmartSql实例 v ...

  10. SLAM+语音机器人DIY系列：（二）ROS入门——7.理解tf的原理

    摘要 ROS机器人操作系统在机器人应用领域很流行,依托代码开源和模块间协作等特性,给机器人开发者带来了很大的方便.我们的机器人“miiboo”中的大部分程序也采用ROS进行开发,所以本文就重点对ROS ...