<!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. JAVA文件的上传与访问

    /** * 各种文件上传与判断 * types 文件类型(1图片 2视频 3文件) */@RequestMapping(method = RequestMethod.POST, path = &quo ...

  2. 用ASP.NET Core 2.0 建立规范的 REST API -- 预备知识

    什么是REST REST 是 Representational State Transfer 的缩写. 它是一种架构的风格, 这种风格基于一套预定义的规则, 这些规则描述了网络资源是如何定义和寻址的. ...

  3. mysql id从n 开始

    mysql 全部删除数据后设置 id从1开始: truncate table table_name mysql  删除部分数据后设置 id从n开始 ALTER TABLE user auto_incr ...

  4. Python爬虫入门教程 46-100 Charles抓取手机收音机-手机APP爬虫部分

    1. 手机收音机-爬前叨叨 今天选了一下,咱盘哪个APP呢,原计划是弄荔枝APP,结果发现竟然没有抓到数据,很遗憾,只能找个没那么圆润的了.搜了一下,找到一个手机收音机 下载量也是不错的. 2. 爬虫 ...

  5. java~集合的介绍和使用

    大叔转载,原文地址:http://www.700net.com/rewrite.php/read-4491.html 线性表,链表,哈希表是常用的数据结构,在进行Java开发时,JDK已经为我们提供了 ...

  6. Spring Boot 2.0 的快速入门（图文教程）

    摘要: 原创出处 https://www.bysocket.com 「公众号:泥瓦匠BYSocket 」欢迎关注和转载,保留摘要,谢谢! Spring Boot 2.0 的快速入门(图文教程) 大家都 ...

  7. Docker最全教程之Ubuntu下安装Docker（十四）

    前言 Ubuntu是一个以桌面应用为主的开源GNU/Linux操作系统,应用很广.本篇主要讲述Ubuntu下使用SSH远程登录并安装Docker,并且提供了Docker安装的两种方式,希望对大家有所帮 ...

  8. c# 构造tree下拉框，空格转化

    c#代码写的空格如何在html中的select中展示出来呢? var str = ""; //父级菜单不缩进 ; j < i; j++) { str += HttpUtili ...

  9. element表格添加查看操作

    表格代码:黄色部分关键代码 首先看效果: <el-table :data="tableData" border height="480" style=&q ...

  10. jsp内置对象-session对象

    一.session概述 隐含对象session是javax.servlet.http.HttpSession接口实现类的对象,用于保存用户的状态信息. 在web开发中,服务器为每个用户浏览器创建一个会 ...