H5的新应用-指定视频的播放进度

————————————————————————————————

<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>

—————————————————————————————————

<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>

——————————————————————————————————

时间: 2024-11-09 10:08:30

H5的新应用-指定视频的播放进度的相关文章

H5 多个视频 循环播放效果

跟轮播效果差不多 页面HTML结构 <video id="myvideo" width="100%" height="auto" controls="controls" > 你的浏览器不支持HTML5播放此视频 <span style="white-space:pre"> </span><!-- 支持播放的文件格式 --> <source src=&qu

回顾知识,H5的新特性

H5的新元素让一个页面避免都是div,灵活使用H5的各种新元素 1,结构元素 section元素 可以认为div是section元素,一个普通的分块元素,可用来定义网站中的特定的可区别的区域 header元素包括标题,logo,导航和其他页眉的内容,可以在网站上加多个header,就像给内容加多个标题 hgroup元素 即将标题进行分组的元素 footer元素版权声明和作者信息,包涵一些链接 nav元素主要用于主导航菜单 article元素独立成文且以其他格式重用的内容应该置于一个article

Android SurfaceView + MediaPlayer实现分段视频无缝播放

Android当中实现视频播放的方式有两种,即:通过VideoView实现或者通过SurfaceView + MediaPlayer实现. 由浅至深,首先来看下想要在Android上播放一段视频,我们应当怎么做. 前面我们已经提到了两种方式,这里我们来看一下具有更好的拓展性的第二种方式,也就是通过SurfaceView + MediaPlayer进行实现. 首先,我们来定义一个布局文件如下,为了方便起见,我们仅仅只在该布局中定义了一个SurfaceView: <?xml version="

在滚动列表中实现视频的播放(ListView &amp; RecyclerView)

英文原文:Implementing video playback in a scrolled list (ListView & RecyclerView) 本文将讲解如何在列表中实现视频播放.类似于诸如 Facebook, Instagram 或者 Magisto这些热门应用的效果: Facebook: Magisto: Instagram: 这片文章基于开源项目: VideoPlayerManager. 所有的代码和示例都在那里.本文将跳过许多东西.因此如果你要真正理解它是如何工作的,最好下载

github视频录制播放相关功能-参考

lookingstars/JZVideoDemo  视频播放器 Updated on 11 Aug Objective-C 15 10 caoguoqing/VideoEditDemo  iOS video cut ,also can add blackgroundmusic iOS 视频剪辑,视频添加背景音乐 Updated on 13 Jun 2014 Objective-C 139 50 835239104/KrVideoPlayerPlus  根据36Kr开源的KRVideoPlayer

照相、从相册上取照片、播放音频、播放本地视频、播放网络视频、MPMoviePlayerController

一.照相.从相册上去照片 1. 先判断是否支持照相功能 *判断当前设备是否支持照相功能,支持返回YES 否则返回NO 注意:模拟器不支持照相功能 把握一个原则只要是物理硬件相关的功能模拟器都不支持 例如: UIImagePickerController 专门处理与照片相关的功能类 是一个控制器 继承于导航视图控制器 if ([UIImagePickerController isSourceTypeAvailable:UIImagePickerControllerSourceTypeCamera]

视频自动播放的几种方法

在网页上添加视频往往不能自动播放,如何实现视频的自动播放这是许多朋友想解决的问题.经过收集和研究,找到几种视频实现自动播放的方法,供大家参考.学习.使用! 视频添加到网页中的通用代码: <EMBED src=视频的SWF地址 width=500 height=400  wmode="transparent" invokeURLs="false" quality="high" allowScriptAccess="never&quo

Android中三种视频的播放

在Android中,我们有三种方式来实现视频的播放: 1.使用其自带的播放器.指定Action为ACTION_VIEW,Data为Uri,Type为其MIME类型. 2.使用VideoView来播放.在布局文件中使用VideoView结合MediaController来实现对其控制. 3.使用MediaPlayer类和SurfaceView来实现,这种方式很灵活. 1.调用其自带的播放器: Uri uri = Uri.parse(Environment.getExternalStorageDir

js控制html5 【video】标签中视频的播放和停止

需求:页面中有2个普通按钮a,b.还有一个video标签,能成功播放出视频..我想要的效果是,点击a按钮,视频开始播放,点击b按钮,视频播放停止!!!<br><br>----------------------------------------------------code---------------------------------------------------------------------------<br><br><!DOCT