video的静音，暂停播放

这个有bug就是静音的时候，调整音量大小的条还是会有声音，而且静音键没有与音量条结合

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /><meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://apps.bdimg.com/libs/jquerymobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<title>手机视频</title>
</head>
<body>
<div data-role="page" ><div data="header"><video src="img/钟汉良 - 何以爱情.mp4" width="100%" height="100%" controls="controls"   id="videoSource"  >
您的浏览器不支持 video 标签。
</video></div>
<div data-role="content"><select data-role="slider" onchange="jingyin()" id="slider"><option value="false">静音</option><option value="true"> </option>
</select>
<br />
声音：<input  min="0" max="100" value="10" type="range" id="run" onchange="progress()"/>
<br />
<a href="#" data-role="button" data-inline="true" style="margin-left: 40px;"  id="start">开始</a>
<a href="#" data-role="button" data-inline="true" style="margin-left: 20px;"  id="opause">暂停</a>
<a href="#"  data-role="button"  data-inline="true" style="margin-left: 20px;"  id="end">结束</a>
</div>
<script type="text/javascript">function jingyin(){//console.log($("#slider")[0].selectedIndex);var index=$("#slider")[0].selectedIndex;var a=$("#slider option:eq("+index+")").val();if(a=="true"){$("#videoSource").prop("muted","muted");}else{$("#videoSource").removeProp("muted");}}window.onload=function(){var oStart = document.getElementById('start');var oEnd = document.getElementById('end');            var oVideo = document.getElementById('videoSource');var opause=document.getElementById('opause');// 开始函数oStart.onclick=function(){oVideo.play();}opause.onclick=function(){oVideo.pause();}// 停止函数oEnd.onclick=function(){oVideo.pause();oVideo.currentTime=0;}}function progress(){var run=document.getElementById('run');var oVideo = document.getElementById('videoSource');oVideo.volume=run.value/100;oVideo.muted=false;}</script></body>

video的静音，暂停播放相关推荐

Vue——video标签实现不静音自动播放
由于浏览器厂商为了提高用户体验禁止video标签可以有声的自动播放,也就是说如果想让video标签能够自动播放必须给video标签添加muted属性. 但是在开发的过程中我们需要用视频自动有声播放,比 ...
video标签监听播放暂停，隐藏下载按钮
/* 隐藏视频默认的下载按钮*/ video::-webkit-media-controls-enclosure {overflow:hidden;} video::-webkit-media-con ...
HTML5 video标签，自定义播放器
video标签: video常用的属性: controls 不写controls视频不会播放属性规定浏览器应该为视频提供播放控件(暂停进度条全屏属性) poster 封皮路径 autoplay ...
android html5 video 格式,关于H5 video在移动端播放问题
常见问题和解决方案: 1.video添加自动播放属性autoplay,无法正常播放视频. 解决方案: 需要在video标签中添加muted属性但是设置muted之后,它规定视频的音频输出时应该被静音 ...
20190227最近比较纠结的问题vue的video中视频的播放和nginx-rtmp的推流以及什么时候推流的分析
1.vue中的video的使用(支持MP4) Vue中引入Video.js视频播放器参考:https://www.jianshu.com/p/8b8023c7ed37 Video.js是一个有着HT ...
Unity 基础之在 UGUI 上简单实现VideoPlayer视频播放的功能，简单暂停播放/显示视频名称/显示时长/拖拽播放等
Unity 基础之在 UGUI 上简单实现VideoPlayer视频播放的功能,简单暂停播放/显示视频名称/显示时长/拖拽播放等目录 Unity 基础之在 UGUI 上简单实现VideoPl ...
video标签不能自动播放的原因
复习一下video标签重要的属性吧~文章来源站点https://www.yii666.com/ src 要播放的视频的 URL. autoplay 如果出现该属性,则视频在就绪后马上播放. contr ...
微信小程序中的video视频实现自定义播放按钮、封面图、视频封面上文案
效果图展示: 实现方法: 在video中添加一个cover-view,在cover-view写两个cover-image,一个用来存储封面图.一个用来存放播放按钮,同级写一个cover-view用 ...
uniapp h5直播拉流的几种方法 flv.js， video.js，阿里播放器sdk，video标签
uniapp h5直播拉流的几种方法 flv.js, video.js, 阿里播放器sdk,video标签前言首先引入资源文件需要创建index.html 模板文件 flv.js video.j ...
直接修改html代码视频进度,HTML5实现video标签的自定义播放进度条
现在随着html5的渐热,越来越多的web开发者都开始选择使用html5写出一些比较好的web应用. html代码: HTML5-Video-Player .videoPlayer{ border: ...

video的静音，暂停播放

video的静音，暂停播放相关推荐

最新文章

热门文章