H5的新应用-指定视频的播放进度
<!DOCTYPE html>
<html>
<head>
<title>指定视频的播放进度</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
//播放/暂停，采用同一个方法实现
function playPause(){
//获取视频DOM元素
var myVideo = document.getElementById("myVideo");
if (myVideo.paused) //判断当前是否处于暂停状态
myVideo.play(); //调用play()方法开发播放
else
myVideo.pause(); //调用pause()方法暂停视频播放
}
//从中间开始播放
function playInMid(){
//获取视频DOM元素
var myVideo = document.getElementById("myVideo");
//得到视频的总时长
var duration = myVideo.duration;
//得到当前的进度
var currentTime = myVideo.currentTime;
//判断是否暂停中
if (!myVideo.paused)
myVideo.pause();
//从总时长的一半的位置开始播放
myVideo.currentTime = duration / 2;
//继续播放视频
myVideo.play();
}
</script>
</head>
<body style="text-align:center">
<!-- HTML5新增的video标签，用于在网页里嵌入可以播放的视频 -->
<video width="320" height="240" controls="controls" id="myVideo">
<!-- 提供了两种格式的视频文件，以适应不同浏览器对video的支持 -->
<source src="movie.mp4" type="video/mp4" />
<source src="movie.ogg" type="video/ogg" />
对不起，您的浏览器暂不支持video视频标签!
</video>
<br/>
<input type="button" value="从头播放" onclick="playPause();"/>
<input type="button" value="从中间播放" onclick="playInMid();"/>
</body>
</html>
H5的新应用-指定视频的播放进度的更多相关文章
- 网页背景H5视频自动播放---PC端、移动端兼容问题完美解决方案（IOS、安卓、微信端）
最近公司官网需要使用视频当做banner背景且自动播放,并且因为是官网需要做到PC端和移动端都可以适配兼容,这些问题很是头疼: 兵来将挡,水来土掩,进过查阅相关技术资料,现已完美兼容PC端和移动端.下 ...
- Android：webView加载h5网页视频，播放不了，以及横屏全屏的问题和实现自定义加载进度条的效果
1.webView加载h5网页视频,播放不了,android3.0之后要在menifest添加硬件加速的属性 android:hardwareAccelerated="true". ...
- H5 多个视频 循环播放效果
跟轮播效果差不多 页面HTML结构 <video id="myvideo" width="100%" height="auto" co ...
- HTML5 十大新特性(三)——视频和音频
一.视频(video) H5新加了video标签,用来播放视频,默认为一个300*150的inline-block. 二.音频(audio) H5新加了audio标签,用来播放音频,默认为一个300* ...
- Android开发笔记——视频录制播放常见问题
本文分享自己在视频录制播放过程中遇到的一些问题,主要包括: 视频录制流程 视频预览及SurfaceHolder 视频清晰度及文件大小 视频文件旋转 一.视频录制流程 以微信为例,其录制触发为按下(住) ...
- H5 的直播协议和视频监控方案
H5 的直播协议和视频监控方案 一.流媒体主要实现方式 二.流媒体技术 2.1 流媒体 2.2 直播 2.3 流协议 2.3.1 HLS 协议 2.3.2 RTMP 协议 2.3.3 RTSP 协议 ...
- Android SurfaceView + MediaPlayer实现分段视频无缝播放
Android当中实现视频播放的方式有两种,即:通过VideoView实现或者通过SurfaceView + MediaPlayer实现. 由浅至深,首先来看下想要在Android上播放一段视频,我们 ...
- 深入理解MVC C#+HtmlAgilityPack+Dapper走一波爬虫 StackExchange.Redis 二次封装 C# WPF 用MediaElement控件实现视频循环播放 net 异步与同步
深入理解MVC MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性 ...
- WPF VlC 实现视频的播放（1）
WPF 使用VLC实现视频的播放:网上开源代码我复制了一份: https://github.com/someonehan/Vlc.DotNet 1. 准备阶段 (I) libvlc.dll 和 l ...
随机推荐
- ES6（一）let const
1.let 声明变量 let和var区别: let 只在变量声明时所在的代码块内有效 let不允许在同一作用域内重复声明变量 let不存在变量提升 const: 也是声明一个只读常量,一旦声明,常量的 ...
- Date对象 识记
1.Date 对象创建 var myDate=new Date() 2.Date 对象属性 constructor pototype 3.Date 对象方法 Date() ...
- sql server 2012提示评估期已过的解决办法 附序列号
sql server 2012提示评估期已过的解决方法: 第一步:进入SQL2012配置工具中的安装中心. 第二步:再进入左侧维护选项界面,然后选择选择版本升级. 第三步:进入输入产品密钥界面,输入相 ...
- windows 激活等命令
Win+R 输入:slmgr.vbs -dlv 显示:最为详尽的激活信息,包括:激活ID.安装ID.激活截止日期slmgr.vbs -dli 显示:操作系统版本.部分产品密钥.许可证状态slmgr.v ...
- msyql sql语句
参考: http://www.cnblogs.com/aspnethot/articles/1397130.html 修改表字段ALTER TABLE table_name CHANGE old_fi ...
- hbase 无法操作与hadoop的安全模式的原因
最近使用hbase时,运行zookeeper的机子没有正常关闭zookeeper就关机了,导致开机后整个hbase集群无法使用,表现为master的localhost:60010 无法登录,使用hba ...
- 对adapter的封装优化
一般不优化的adapter通常继承自BaseAdapter会出现一下几个问题: getCount(), getItem(), getItemId()代码都要去重写,一个adapter还行,如果adap ...
- CodeForces 700B Connecting Universities
统计每一条边的贡献,假设$u$是$v$的父节点,$(u,v)$的贡献为:$v$下面大学个数$f[v]$与$2*k-f[v]$的较小值. #pragma comment(linker, "/S ...
- 【1】ubuntu 安装docker
官方支持安装docker的Ubuntu版本: ubuntu trusty 14.04(LTS) (64位) ubuntu precise 12.04(LTS) (64位) ubuntu raring ...
- alibaba远程调用框架dubbo原理
alibaba有好几个分布式框架,主要有:进行远程调用(类似于RMI的这种远程调用)的(dubbo.hsf),jms消息服务(napoli.notify),KV数据库(tair)等.这个框架/工具/产 ...