<!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. Shell中map的使用

    Shell中的map与array有很多的相似之处,array操作:https://www.cnblogs.com/qq931399960/p/10786111.html 一.在使用map时,需要先声明 ...

  2. 第16次CCF CSP认证-第5题-317 号子任务(subtask317)-图论最短路径

    [题目背景]“你在平原上走着走着,突然迎面遇到一堵墙,这墙向上无限高,向下无限深,向左无限远,向右无限远,这墙是什么?”——<流浪地球>原著我们带着地球去流浪了,为了处理流浪过程中可能会发 ...

  3. 使用maven生成可执行jar包(包含依赖)

    零零散散找了一些文章,有些感觉好乱,自己整理一下 以下是pom.xml里的配置,本来有很多依赖包,为了不让配置看着很长,我删了一些dependencies中我自己项目中引入的jar包 <proj ...

  4. 【死磕Java并发】----- 死磕 Java 并发精品合集

    [死磕 Java 并发]系列是 LZ 在 2017 年写的第一个死磕系列,一直没有做一个合集,这篇博客则是将整个系列做一个概览. 先来一个总览图: [高清图,请关注"Java技术驿站&quo ...

  5. MySql开启慢查询日志并使用pt-query-digest 分析

    慢查询日志会将查询过程中超出你设置的时间的查询记录下来,以便供开发者进行分析和优化. 1. 开启慢查询 1.1 查看当前设置 mysql> show variables like "% ...

  6. Python爬虫10-页面解析数据提取思路方法与简单正则应用

    GitHub代码练习地址:正则1:https://github.com/Neo-ML/PythonPractice/blob/master/SpiderPrac15_RE1.py 正则2:match. ...

  7. Python基础（解压序列）

    解压序列: a,b=(1,2) # a,b=[1,2] print(a,b) #输出结果:1 2 #获取第一个值和最后一个值 a,*_,c=(1,2,3,4,5,6,7,8,9) print(a) p ...

  8. 访问了一次百度网页，你都经历了什么？https及tcp协议揭秘

    打开https://www.baidu.com/ 网页一个简单的动作,都经历了什么?你想探究内部的原理吗?那我们一起去探索吧 1.准备工作 安装好wireshark.Wireshark(前称Ether ...

  9. 一套代码小程序&Web&Native运行的探索02

    接上文:一套代码小程序&Web&Native运行的探索01,本文都是一些探索性为目的的研究学习,在最终版输出前,内中的内容可能会有点乱 参考: https://github.com/f ...

  10. SQL优化 MySQL版 -分析explain SQL执行计划与笛卡尔积

    SQL优化 MySQL版 -分析explain SQL执行计划 作者 Stanley 罗昊 [转载请注明出处和署名,谢谢!] 首先我们先创建一个数据库,数据库中分别写三张表来存储数据; course: ...