1. <!DOCTYPE html>
  2. <html>
  3.    <head>
  4.           <title>HTML5-video(播放暂停视频；打开关闭声音；进度条)</title>
  5.           <meta charset="utf-8"/>
  6.    </head>
  7. <body>
  8. <video id="video1" controls="controls" width="400px" height="400px">
  9.     <source src="videos/demo.mp4">
  10. </video>
  11.  
  12. <div>
  13.     <button onclick="enableMute()" type="button">关闭声音</button>
  14.     <button onclick="disableMute()" type="button">打开声音</button>
  15.     <button onclick="playVid()" type="button">播放视频</button>
  16.     <button onclick="pauseVid()" type="button">暂停视频</button>
  17.     <button onclick="showFull()" type="button">全屏</button><br />
  18.     <span>进度条:</span>
  19.     <progress value="0" max="0" id="pro"></progress>
  20.     <span>音量:</span>
  21.     <input type="range" min="0" max="100" value="50" onchange="setvalue()" id="ran"/>
  22. </div>
  23.  
  24. <script>
  25.     var btn=document.getElementsByTagName("button");
  26.     var myvideo=document.getElementById("video1");
  27.     var pro=document.getElementById("pro");
  28.     var ran=document.getElementById("ran");
  29.  
  30.     //关闭声音
  31.     function enableMute(){
  32.         myvideo.muted=true;
  33.         btn[0].disabled=true;
  34.         btn[1].disabled=false;
  35.     }
  36.     //打开声音
  37.     function disableMute(){
  38.         myvideo.muted=false;
  39.         btn[0].disabled=false;
  40.         btn[1].disabled=true;
  41.     }
  42.     //播放视频
  43.     function playVid(){
  44.         myvideo.play();
  45.         setInterval(pro1,1000);
  46.     }
  47.     //暂停视频
  48.     function pauseVid(){
  49.         myvideo.pause();
  50.     }
  51.     //全屏
  52.     function showFull(){
  53.         myvideo.webkitrequestFullscreen();
  54.     }
  55.     //进度条展示
  56.     function pro1(){
  57.         pro.max=myvideo.duration;
  58.         pro.value=myvideo.currentTime;
  59.     }
  60.     //拖动range进行调音量大小
  61.     function setvalue(){
  62.         myvideo.volume=ran.value/100;
  63.         myvideo.muted=false;
  64.     }
  65. </script>
  66.  
  67. </body>
  68. </html>
  1. 效果图：

  1.  

HTML5-video(播放暂停视频；打开关闭声音；进度条)的更多相关文章

  1. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

  2. 31.JS实现控制HTML5背景音乐播放暂停

    实现控制网站背景音乐的播放暂停在html5中是非常容易和简单的,仅仅几行代码即可实现.首先在网页中嵌入背景音乐,html5代码为: <script src="http://wuover ...

  3. html5 video使用autoplay属性时，声音混乱

    html5 video使用autoplay属性时,声音混乱 页面代码 Index.html <html xmlns="http://www.w3.org/1999/xhtml" ...

  4. Android -- 真正的 高仿微信 打开网页的进度条效果

    (本博客为原创,http://www.cnblogs.com/linguanh/) 目录: 一,为什么说是真正的高仿? 二,为什么要搞缓慢效果? 三,我的实现思路 四,代码,内含注释 五,使用方法与截 ...

  5. H5的video标签在网页上播放MP4视频时只有声音没有画面

    最近做一个项目时,发现mp4文件播放时没有图像,只有声音,代码检查了N次,都没有问题,就算是直接使用网上的实例代码,也只能播放实例视频,mp4文件绝对路径,相对路径也都试了,还是不能播放我的mp4. ...

  6. HTML5 Video与Audio 视频与音频

    ---- 视频Video对象 - 指定视频播放地址 <video width="320" height="240" controls="cont ...

  7. Android中webview html5 自动播放本地视频

    MainActivity代码 public class Html5VideoAutoPlay extends Activity { WebView webview = null; @Override ...

  8. 播放一个视频并用滚动条控制进度-OpenCV应用学习笔记二

    今天我们来做个有趣的程序实现:利用OpenCV读取本地文件夹的视频文件,并且在窗口中创建拖动控制条来显示并且控制视频文件的读取进度. 此程序调试花费了笔者近一天时间,其实大体程序都已经很快写出,结果执 ...

  9. HTML+JS实现视频上传显示进度条

    示例代码: css部分: #content{border: 1px solid saddlebrown;padding: 16px;border-radius: 2px} .list {top: 15 ...

随机推荐

  1. 缓存算法LRU笔记

      LRU原理与分析 LRU是Least Recently Used 的缩写,翻译过来就是“最近最少使用”,也就是说,LRU缓存把最近最少使用的数据移除,让给最新读取的数据.而往往最常读取的,也是读取 ...

  2. CSS盒模型面试知识点

    一.基本概念 1.基本概念:标准盒模型+怪异盒模型(IE模型) 基本组成:由margin.padding.content组成. 2.标准盒模型和IE模型的区别 标准盒模型中width指的是内容区域co ...

  3. 阿里云 Serverless 应用引擎（SAE）发布 v1.2.0，支持一键启停、NAS 存储、小规格实例等实用特性

    近日,阿里云 Serverless 应用引擎(SAE)发布 v1.2.0版本,新版本实现了以下新功能/新特性: 一键启停开发测试环境:企业开发测试环境一般晚上不常用,长期保有应用实例,闲置浪费很高.使 ...

  4. mybatis添加数据时返回主键 insert 返回主键值

    insert 返回主键值 useGeneratedKeys=“true” parameterType=“USer” keyProperty=“id”, <insert id="inse ...

  5. Linux内核设计与实现 总结笔记（第十章）内核同步方法

    一.原子操作 原子操作可以保证指令以原子的方式执行----执行过程不被打断. 1.1 原子整数操作 针对整数的原子操作只能对atomic_t类型的数据进行处理. 首先,让原子函数只接收atomic_t ...

  6. scanf() 与 gets()--转载

    scanf( )函数和gets( )函数都可用于输入字符串,但在功能上有区别.若想从键盘上输入字符串"hi hello",则应该使用__gets__函数. gets可以接收空格:而 ...

  7. 5个用/不用GraphQL的理由

    我在如何使用Gatsby建立博客 / How to build a blog with Gatsby这篇文章中提过GraphQL在Gatsby中的应用.总的来讲,它是一个新潮的技术,在适宜的使用场景威 ...

  8. MySQL慢日志分析之pt-query-digest

    http://www.php.cn/mysql-tutorials-357655.html 监控慢日志: pt-query-digest 切割分析慢日志 anemometer 删掉垃圾查询 pt-ki ...

  9. 图论之点双&边双

    说人话: 边双联通: a到b的路径上无必经边 点双联通: a到b的路径上除了a,b没有必经点 tarjan求点双联通: 代码(补图) 割点: 桥: 求点双:强制dfs时不越过割点,即可求出一个块 求边 ...

  10. mysql group by 去重 分类 求和

    w SELECT COUNT(*) FROM ( SELECT COUNT(*) FROM listing_vary_asins GROUP BY asin, countrycode ) AS w; ...