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 ...
随机推荐
- hdu5514 非2的次幂容斥原理
/* 1 126 223092870 210 330 390 462 510 546 570 690 714 770 798 858 910 966 1122 1155 1190 1254 1326 ...
- Java. Warning – Build path specifies execution environment J2SE-1.5
Build path specifies execution environment J2SE-1.5. There are no JREs installed in the workspace th ...
- LCOV 如何过滤iostream等系统函数的覆盖率信息
最近在做cppunit test相关工作,用gcov和lcov工具来查看每行代码的覆盖率,个人感觉lcov真棒,看起来很舒服,点起来也很爽!~~ 闲聊至此,如题: 我使用的是lcov的 --remov ...
- LoadRunner参数值定义-摘自一米阳光
深入解析LoadRunner下的参数化取值 熟悉LoadRunner的人,相信都会经常使用参数化功能,但是对于参数化的使用到底了解多少,就值得深思了.包括本人在内也是,每次在做压力测试的时候,基本 ...
- C#隐藏（new）方法和重写（override）方法
在基类调用的时候 隐藏方法还是调用基类的方法 而重写方法调用的就是子类的中的方法 同时,当子类中的方法与父类或者所实现的接口中的扩展方法冲突时,那么此时相当于一个隐藏方法 基类调用或者接口调用的时候使 ...
- mui 访问手机自带是否连接网络
//mui检测是否连接网络 function getSysInfo() { // var str = ""; // str += "名称:" + plus. ...
- AngularJs应用
引用angularjs文件 AngularJS 应用组成如下:View(视图), 即 HTML.Model(模型), 当前视图中可用的数据.Controller(控制器), 即 JavaScript ...
- weex 语法高亮
@1.ctrl+shift+p,调出控制命令面板,@2.输入pic,点击进入 @3.输入vue Syntax Highlight,等待下载 所有的sublime下载插件同理. vue Syntax H ...
- 笔记整理--C语言
linux下错误的捕获:errno和strerror的使用 - Google Chrome (2014/2/26 17:31:39) linux下错误的捕获:errno和strerror的使用 201 ...
- 2016 C++及系统软件技术大会亮点
2016 C++及系统软件技术大会将于201610月28日-29日在上海举办!此次2016 C++及系统软件技术大会秉承"全球专家. 连接智慧"的理念!大会特邀C++之父Bjarn ...