自定义video控制栏，移动端可行

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>预览页</title><meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"><meta name="apple-mobile-web-app-capable" content="yes"><meta name="apple-mobile-web-app-status-bar-style" content="black"><link rel="stylesheet" href="../../css/mui.min.css"><link rel="stylesheet" href="../../css/video.css" /><style>.introduce {height:40px;position:relative;background-color:#fff;padding-left:15px;}.introduce>p.mui-ellipsis {line-height:40px;width:100%;padding-right:160px;margin-bottom:0;}.introduce>button.mui-btn {position:absolute;right:80px;top:4px;}.introduce>select {position:absolute;right:5px;top:3px;width:70px;padding:4px;border:1px solid #ddd !important;}</style></head><body><div class="mui-content"><div class="introduce"><button class="mui-btn" id='capture'>抓图</button></div><img src="../../img/map.jpg" id="preload" class="preload" /><div class="player mui-hidden" id="player"><video id="video2" autoplay="autoplay" poster="../../img/map.jpg" src="../../images/movie.mp4"></video> <div class="controls" id="controls"><span class="video video-play" id="switch"></span><span class="video video-big" id="expand"></span><div class="progress"><div class="bar"></div><!--视频总时长--><div class="loaded"></div><!--视频加载时长--><div class="elapse" id="elapse"><span></span></div><!--视频当前播放长度--></div><div class="time"><span class="currentTime" id="currentTime">00:00</span>/<span class="totalTime" id="totalTime">00:00</span></div></div></div></div><script src="../../js/mui.min.js"></script><script>
//          mui.plusReady(function() {//plus.screen.lockOrientation('portrait-primary');"use strict";var video = document.getElementById('video2');/** 抓图*/document.getElementById('capture').addEventListener('tap',function(){var canvas = document.createElement('canvas');canvas.width = video.videoWidth;canvas.height = video.videoHeight;canvas.getContext('2d').drawImage(video,0,0,canvas.width,canvas.height);
//                  var img = document.getElementById('img');
//                  img.src = canvas.toDataURL();mui.toast('截图成功');if(null!=plus.storage.getItem('screenshot') && ''!=plus.storage.getItem('screenshot')){plus.storage.setItem('screenshot',plus.storage.getItem('screenshot')+canvas.toDataURL()+'__'+document.getElementById('DevName').innerText+"__"+new Date()+"——");}else{plus.storage.setItem('screenshot',canvas.toDataURL()+'__'+document.getElementById('DevName').innerText+"__"+new Date()+"——");}});/** 视频能播了*/video.addEventListener('canplay',function(){setTimeout(function(){document.getElementById('preload').classList.add('mui-hidden');document.getElementById('player').classList.remove('mui-hidden');document.getElementById('totalTime').innerText=getTime(video.duration);},1000);});/** 视频暂停、播放*/document.getElementById('switch').addEventListener('tap',function(){debugger;if(video.paused){video.play();}else {video.pause();}toggleClass(this,'video-play','video-pause');});/** 视频播放过程中*/video.addEventListener('timeupdate',function(){var currentTime=video.currentTime;document.getElementById('currentTime').innerText=getTime(currentTime);//模拟进度条document.getElementById('elapse').style.width=(currentTime/video.duration*100)+'%';})/** 视频全屏*/document.getElementById('expand').addEventListener('tap',function(){plus.screen.lockOrientation('landscape-primary');toggleClass(this,'video-big','video-small');document.querySelector('body').classList.add('big');var player = document.getElementById('player');
//                  player.style="height:"+(window.scrollHeight-44)+";width:"+(window.scrollWidth-)+});/** 点击视频任务栏消失和出现*/video.addEventListener('tap',function(){toggleClass(document.getElementById('controls'),'mui-hidden','');})//通过时间返回需要展示的htmlfunction getTime(time){//将时间进行转换，获取分秒var minute = Math.floor(time/60);var second = Math.floor(time%60);//前面补0minute = minute<10?"0"+minute:minute;second = second<10?"0"+second:second;return minute+':'+second;}function toggleClass(ele,a,b){if(ele.classList.contains(a)){ele.classList.remove(a);ele.classList.add(b);}else {ele.classList.add(a);ele.classList.remove(b);}}</script></body></html>

转载于:https://www.cnblogs.com/lijia-kapok/p/7204720.html

自定义video控制栏，移动端可行相关推荐

[html]HTML5如何隐藏video元素的控制栏、全屏按钮？
[html]HTML5如何隐藏video元素的控制栏.全屏按钮? 将<video width="800px" height="400px" id=&quo ...
JS自定义多媒体Video控制条（控制视频播放、进度、全屏案例）
案例参考先来看一下一些视屏控件需求点击按钮实现视频的播放和暂停按钮切换全屏和退出全屏功能进度条和时间前期准备 HTML DOM Video 对象文档图标字体库下载和文档案例目录 HTM ...
关于VIDEO.JS播放器控制栏播放按钮点击问题
关于如何调用video.js组件作为播放器实现视频播放功能,网上有很多相关帖子,这里就不详细展开了.但在众多帖子里面,都没有提到网页版video的控制栏播放按钮点击问题,特此留贴记录一番. 症状是如下 ...
jquery设置video的宽度_jQ效果：jQuery和css自定义video播放控件
下面介绍一下通过jquery和css自定义video播放控件. Html5 Video是现在html5最流行的功能之一,得到了大多数最新版本的浏览器支持.包括IE9,也是如此.不同的浏览器提供了不同的 ...
react native 之自定义顶部导航栏，实现标题居中可控
本来一直用的都是RN自带的组件react-navigation,但是后面需求有变,需要顶部导航栏目的标题可以自己控制,同一页面的标题根据数据库查出来的内容变化.因此自定义了一个导航栏目,实现需求. 关 ...
Html中如何自定义Video显示的长宽比
Html中如何自定义Video视频流显示的长宽比首先,这个问题是之前课题组有需要控制显示视频流的长宽比,更严格者需要针对双目摄像头裁切一半视频显示在网页上,期间找了很多的网上的解决办法,发现都没有人 ...
如何实现自定义倍速播放PC端浏览器中的视频
如何实现自定义倍速播放PC端浏览器中的视频随机打开一个有视频的浏览器按键[F12]弹出窗口点击console或控制台在红框处输入代码 document.querySelector(" ...
android安卓远程协助控制电脑PC端
前提:界面xy已经变化测试1: float y =0;float x = 0;@Overridepublic boolean onTouch(View v, MotionEvent event) { ...
基于 Thingsboard 平台自定义 RPC 控制类小部件示例
基于 Thingsboard 平台自定义 RPC 控制类小部件示例 1. 小部件介绍 2. 创建小部件 3. 部件编辑器 3.1 简介 3.2 资源 / HTML / CSS 3.3 JavaScri ...

自定义video控制栏，移动端可行

自定义video控制栏，移动端可行相关推荐

最新文章

热门文章