<!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. 群晖NAS再折腾

    端口转发 两年前我买了一台双盘位的群晖NAS,配置两个4T的硬盘,这玩意儿一度改变了我使用电脑的模式,真是爽爆了!最最主要的功能就是我能用它规整我所有的资料,并且不管何时何地,只要有网就能访问.为了能 ...

  2. 我的第一个MyBatis

    (1)步骤:1.新建实体类对象---根据数据库字段来设计,有多少字段设多少变量,变量名要字段名一致.   2.新建配置文件config.xml---主要用来获取数据源,里面内容大致需要填写:数据库驱动 ...

  3. shell if条件判断中：双中括号与单中括号的区别

    电脑重装了系统,登录虚拟机的shell脚本需重写,在为编写的脚本命名时发现存在同名脚本,才想起来是连接公司服务器的登录脚本,不想写俩脚本,怕记混了,那就整合一下.代码如下: #!/bin/bash#z ...

  4. kafka的设计

    1.动机 设计 kafka 初衷,作为统一平台处理大公司的实时数据.所以 必须具有如下特性: 支持海量数据 高吞吐量 低延迟(实时性) 支持分区,分布式 容错 2.持久化 kafka 高度依赖 文件系 ...

  5. 关于pip安装时提示"pkg_resources.DistributionNotFound"错误

    使用pip install --upgrade pip升级pip中途失败,再次安装pip,完成后出现如下错误: 尝试重新安装pip也不行,同样会出现上述问题. 此时我们查看/usr/bin/pip文件 ...

  6. 【Netty】(6) ---源码ServerBootstrap

    [Netty]6 ---源码ServerBootstrap 之前写了两篇与Bootstrap相关的文章,一篇是ServerBootstrap的父类,一篇是客户端Bootstrap类,博客地址: [Ne ...

  7. 推荐系统(Recommendation system )介绍

    前言 随着电子商务的发展,网络购物成为一种趋势,当你打开某个购物网站比如淘宝.京东的时候,会看到很多给你推荐的产品,你是否觉得这些推荐的产品都是你似曾相识或者正好需要的呢.这个就是现在电子商务里面的推 ...

  8. Asp.Net Core中服务的生命周期选项区别和用法

    在做一个小的Demo中,在一个界面上两次调用视图组件,并且在视图组件中都调用了数据库查询,结果发现,一直报错,将两个视图组件的调用分离,单独进行,却又是正常的,寻找一番,发现是配置依赖注入服务时,对于 ...

  9. java~lambda表达式让查询更优雅

    在java之前的版本里,如果希望从集合时查找符合条件的数据,如果先遍历他,这种写法是我们不能接受的,所以现在java有了lambda就很好的解决了这个问题,让代码更优雅一些! /** * lambda ...

  10. 前端CSS学习-Background背景相关

    在CSS中 背景属性用于定义HTML元素的背景. background主要设置一下五个属性: background-color  // 设置元素的背景颜色. background-image // 把 ...