html5--视频播放器实例

总结：

1、相对定位和绝对定位的区别，两者都是浮起来了

2、属性和方法都是有对象的，搞清楚对象之后，属性和方法就很好用了，我们一般可以用document.getElementById("video");来获取对象

3、在外部修改html属性的时候，innerHTML和style是相对的，前者关注内容，后者关注样式

4、我们可以用event来获取刚刚操作的那个对象，然后来修改它的样式和内容，用法是event.target，例如event.target.innerHTML=';'

5、视频的前进或者后退都是通过视频对象的currentTime属性来实现的

6、视频设置声音直接操作视频对象的volume对象即可

7、进度条的响应?window.onload方法+timeupdate事件，相对于每秒更新一次Progress

video.addEventListener('timeupdate',Progress)

8、offsetX,offsetY 发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标

var w=parseInt(document.getElementById("probar").style.width)

video.currentTime = video.duration * (event.offsetX /w);

这段代码时进度条改变之后更新video

9、截屏功能则只需要操作canvas的对象的drawImage方法即可，因为这个方法可以操作视频

10、下面是一波css属性，把这些单词记住就ok了

outline: none;去掉button的边框

border-radius: 10px;边框圆角

opacity: 0;设置为透明

font-family:'Webdings';设置字体

display: block;display属性

cursor: pointer;设置鼠标样式

background-image:linear-gradient(-30deg,rgb(8,0,0),rgb(32,0,0) 30%,rgb(120,0,0) 60%,rgb(250,0,0) 100%);线性渐变

animation: keframe 1s linear infinite;关键帧动画

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>8-33 课堂演示</title>

     <style type="text/css">

         /*父亲设置定位属性，孩子好偏移*/

         #main{

             width: 800px;height: 600px;

             position: relative;

         }

         /*都是按钮*/

         button{

             outline: none;

         }

         /* 播放控件区*/

         .bar{

             border:1px solid;

             position: relative;

             width: 100%;height: 15%;

             background: #ccc;

             border-radius: 10px;

             opacity: 0;

         }

         .bar:hover{

             opacity: 1;

         }

         #playorpause,.next,.back,.muted0,#vol,.pic{

             display: block;background: orange;

             border-radius: 48px;cursor: pointer;position: absolute;

             font-family:'Webdings';

             font-size:48px;color: green;

         }

         #playorpause{

             bottom: 20%;left: 45%;

         }

         .next{

             bottom: 20%;left: 55%;

         }

         .back{

             bottom: 20%;left: 35%;

         }

         .muted0{

             width: 48px; height:48px;

             font-size: 42px;

             bottom: 23%;right: 25%;

         }

         #vol{

             width: 20%;

             bottom: 40%;right: 2%;

         }

         .pic{

             bottom: 20%;left: 20%;

             background: white;

         }

         #progress{

             position: absolute;

             height: 15px;

             width: 10px;

             border-radius: 10px;

             background-size: 30px 20px;

             background-image:linear-gradient(-30deg,rgb(8,0,0),rgb(32,0,0) 30%,rgb(120,0,0) 60%,rgb(250,0,0) 100%);

             animation: keframe 1s linear infinite;

         }

         #probar{

             background:rgba(10,30,10,0.3);

             height:15px;

         }

         @keyframes keframe

         {

             0%   {background-position: 0 0}

             100% {background-position: 60px 10px}

         }

     </style>

 </head>

 <body>

     <div id="main">

         <video id="video" src="qsmy.mp4" controls="controls" width="800"></video>

         <div class="bar">

             <div id="probar" style="width: 800px;"><div id="progress"></div></div>

             <button id="playorpause" onclick="PlayOrPause()">4</button>

             <button  class="next" onclick="Next()">8</button>

             <button  class="back" onclick="Prev()">7</button>

             <button  class="muted0" onclick="Muted()">X</button>

             <input id="vol" type="range" min="0" max="1" step="0.1" onchange="Volume()">

             <button class="pic" onclick="CatchPicture()"><img src="xj2.png" alt="" width="48"></button>

         </div>

         <canvas id="canvas" width="800" height="600"></canvas>

     </div>

     <script>

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

     //播放和暂停

     function PlayOrPause(e)

     {

         if(video.paused)

         {

             //1、style怎么来

             //2、event怎么用

             //3、innerHTML和style是并列的，一个设置内容一个设置样式

             video.play();

             event.target.innerHTML=';'

             event.target.style.color='red'

         }

         else{

             video.pause();

             event.target.innerHTML='4'

             event.target.style.color='green'

         }

     }

     //前进和后退

     function Prev(){

         video.currentTime-=60;

     }

     function Next(){

         video.currentTime+=60;

     }

     //设置静音

     function Muted(){

         if (video.muted) {

              //从静音到非静音的操作

              video.muted=false;

              event.target.innerHTML='X'

              event.target.style.background='orange'

              document.getElementById('vol').value=video.volume

          }else{

              //设置静音操作

              video.muted=true;

              event.target.innerHTML='x'

              event.target.style.background='white'

              document.getElementById('vol').value=0;

          }

      }

     //设置声音

     function Volume(){

         //event的target对象

         video.volume=event.target.value;

     }

      //进度条

      function Progress(){

          var progress=document.getElementById('progress')

          progress.style.width=(video.currentTime/video.duration)*100+'%'

      }

      window.onload=function(){

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

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

          probar.addEventListener('click',progress_click)

          video.addEventListener('timeupdate',Progress)

      }

      function progress_click(){

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

          var w=parseInt(document.getElementById("probar").style.width)

         //alert(event.offsetX/w)  //offsetX,offsetY    发生事件的地点在事件源元素的坐标系统中的 x 坐标和 y 坐标。

         if(event.offsetX){

             video.currentTime = video.duration * (event.offsetX /w);

         }

     }

     function CatchPicture(){

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

         var ctx=canvas.getContext('2d');

         ctx.clearRect(0,0,canvas.width,canvas.height)

         ctx.drawImage(video,0,0,canvas.width,canvas.height);

     }

 </script>

 </body>

 </html>

html5--视频播放器实例的更多相关文章

  1. 打造自己的html5视频播放器

    前段时间重新学习了一下html5的video部分,以前只是停留在标签的使用上,这一次决定深入了解相关的API,并运用这些API打造一个简单的视频播放器.所谓“打造自己的”,就是要自己重写video标签 ...

  2. jqm视频播放器,html5视频播放器,html5音乐播放器,html5媒体播放器,video开展demo,html5视频播放演示示例,html5移动视频播放器

    最近看到很多有用的论坛html5视频播放的发展,音乐播放功能,大多数都在寻找答案.所以,我在这里做一个demo.对于大家互相学习.html5开发越来越流行,至于这也是一个不可缺少的一部分的视频. 如何 ...

  3. html5视频播放器 二 （功能实现及播放优化）

    样式改写css,其中的一些按钮是在“阿里妈妈”上找的字体图标,就不向上传了. /* *CoolPlay视频播放器 * 2016年8月1日 * 627314658@qq.com * */ @font-f ...

  4. html5视频播放器 一 （改写默认样式）

    一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等 先看看效果 是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE ht ...

  5. HTML5播放器实例

    鉴于html5Audio and video的使用,设计了一个自定义风格的播放器,除实现一些基本的默认功能之外,还实现了一些高级功能. 具体功能如下: 实现播放暂停按钮 实现静音按钮 实现音量调节滑动 ...

  6. Html5视频播放器-VideoJS+Audio标签实现视频，音频及字幕同步播放

    一,VideoJS介绍 引用脚本,videojs很为你着想,直接cdn了,你都不需要下载这些代码放入自己的网站 <link href=”http://vjs.zencdn.net/c/video ...

  7. video.js html5 视频播放器

    我个人感觉很不错 https://github.com/videojs/video.js <head> <title>Video.js | HTML5 Video Player ...

  8. 一个html5视频播放器

    具有播放视频,拖拽,自定义右键菜单,上传头像的功能 <!DOCTYPE html><html lang="en"> <head> <met ...

  9. 很震撼的HTML5视频播放器，电影院的感觉

    效果很震撼!有电影院的感觉了.呵呵. 看了下代码,依然是 在一个canvas里嵌入<video>然后getImageData 点击这里查看效果 代码: var canvas = docum ...

  10. html5视频播放器

    <!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. HTML地理位置定位

    最近公司项目需要做一个类似微信朋友圈的互动交友功能,需要显示用户位置信息,因此在网上查了部分资料,记下demo供以后查看学习:(用到了百度api来实现定位功能) <!DOCTYPE html&g ...

  2. 【SQLite】select into 语句

    sqlite不支持类似sqlserver中的select into 语法 在SQL Server中,我们要将一个表中的数据复制到一个新表中,可以这样写: SELECT * INTO newtable ...

  3. shell编程之grep命令的使用

    大家在学习正则表达式之前,首先要明确一点,并把它牢牢记在心里,那就是: 在linux中,通配符是由shell解释的,而正则表达式则是由命令解释的,不要把二者搞混了.切记!!! 通常有三种文本处理工具/ ...

  4. Zabbix 默认网络发现模板修改(第三篇)

    zabbix 默认网络发现模板不能显示ip,我想让他在graph的标题上显示ip,具体要像如下效果 原文地址:http://www.cnblogs.com/caoguo/p/4977254.html ...

  5. yum进程被占用

    使用yum安装软件的时候出现,/var/run/yum.pid 已被锁定,PID 为 6503 的另一个程序正在运行的问题 [root@localhost mysql]# yum install gc ...

  6. Java中字符串的常用属性与方法

    •字符串常用的属性 string.length()————>返回字符串的长度,int类型. •字符串常用的方法 String.contains(";")——————>判 ...

  7. 蓝桥-区间K大数查询

    问题描述: 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正整数,表示给定的序列. 第三个包含一个正整数m,表示询问个 ...

  8. 安装RHEL7红帽操作系统

    1.单击“开启此虚拟机”启动RHEL 7系统安装. 开启虚拟机 2.通过键盘方向键选择Install Red Hat Enterprise Linux 7.0选项,然后回车,开始安装RHEL7操作系统 ...

  9. 36.分组聚合操作—bucket进行多层嵌套

    主要知识点: 分组聚合操作-嵌套bucket.         本讲以前面电商实例,从颜色到品牌进行下钻分析,每种颜色的平均价格,以及找到每种颜色每个品牌的平均价格. 比如说,现在红色的电视有4台,同 ...

  10. JavaSE 学习笔记之多线程（十三）

    多线程: 进程:正在进行中的程序.其实进程就是一个应用程序运行时的内存分配空间. 线程:其实就是进程中一个程序执行控制单元,一条执行路径.进程负责的是应用程序的空间的标示.线程负责的是应用程序的执行顺 ...