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 ...
随机推荐
- Python入门学习
1.访问www.python.org/download下载并安装Python3版本 2.命令行输入python启动交互式命令shell,>>>代表当前行用户的输入 3.基本算数运算: ...
- js 常用插件
文本输入框 计算器 <html> <head> <meta http-equiv="Content-Type" content="text/ ...
- KVM guest caching modes
kvm中host和guest各自维护自己的page caches,使得内存中有两份缓存数据.host的缓存为page cache可以理解为读缓存,guest的缓存为disk write cache,可 ...
- DOM对象和JQuery有什么不同的地方？
jQuery对象和DOM对象使用说明,需要的朋友可以参考下.1.jQuery对象和DOM对象第一次学习jQuery,经常分辨不清哪些是jQuery对象,哪些是 DOM对象,因此需要重点了解jQuery ...
- c# 使用 HttpWebRequest模拟登陆
c# 使用 HttpWebRequest模拟登陆(附带验证码) 分类: C# .net2010-06-04 00:50 35647人阅读 评论(43) 收藏 举报 c#exceptionstreams ...
- 《JS权威指南学习总结--第8章 函数知识》
内容要点: 1.函数表达式定义后立即调用: var tensquared = ( function(x){ return x*x ;}(10) ); 2.嵌套函数: 在JS里,函数可以嵌套 ...
- PAT 团体程序设计天梯赛-练习集 L1-002. 打印沙漏
本题要求你写个程序把给定的符号打印成沙漏的形状.例如给定17个“*”,要求按下列格式打印 ***** *** * *** ***** 所谓“沙漏形状”,是指每行输出奇数个符号:各行符号中心对齐:相邻两 ...
- Codeforces Round #367 (Div. 2) D. Vasiliy's Multiset
题目链接:Codeforces Round #367 (Div. 2) D. Vasiliy's Multiset 题意: 给你一些操作,往一个集合插入和删除一些数,然后?x让你找出与x异或后的最大值 ...
- C程序浅议
文件FILE是程序设计中的一个重要概念.所谓“文件”一般是指存储在外部介质上的数据的集合.操作系统是以文件为单位对数据进行管理的,而文件是以文件名为标识的.操作系统对文件实行“按名存取”. C语言把文 ...
- 触动精灵远程Log模块
一.功能 lua log方法能够自动发现同一网段下面的log服务器 lua log方法能够主动将log发给服务器 lua 客户端进程重启服务端不存在影响 二.实现 服务器使用python编写: 启动一 ...