`
sun810
  • 浏览: 5771 次
  • 性别: Icon_minigender_1
  • 来自: 南京
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

HTML5的video实现书签播放

 
阅读更多
功能:进入页面后,第一次播放从指定位置处(这里假定breakpoint秒)开始,之后从上一次开始。

1、页面中加入video元素。
      <video id='video' preload='none' width="200" height="100" controls autoplay>
    <source id='mp4' type='video/mp4' src="httpURL">
    not supported

      </video>

2、js代码
var MP_Video = document.getElementById("video");

var updatePlayTime = function() {
       MP_Video.currentTime = breakPoint;
       MP_Video.removeAttribute("ontimeupdate");
}

function fromBP() {
if (MP_Video.currentTime == 0) {
MP_Video.setAttribute("ontimeupdate", "updatePlayTime();");
}

MP_Video.play();
}

页面中按钮调用fromBP函数即可
0
0
分享到:
评论

相关推荐

    《Head First HTML5 Programming 中文版》 绝对高清 带书签 150M

    JavaScript作为网页的动态脚本语言,对于实现HTML5的交互功能至关重要。书中会介绍基本的JavaScript语法,事件处理,以及如何使用AJAX进行异步通信。CSS3是CSS的最新版本,它带来了许多新的选择器、布局模式和样式...

    HTML5网页电子书翻页效果

    同时,它还可以处理页面状态的管理,比如记录当前阅读的位置或实现书签功能。 为了实现这个项目,开发人员可能首先会创建一个包含电子书内容的HTML结构,然后使用CSS来定义每个“页面”的样式和翻页动画。接着,...

    HTML5 WebSocket权威指南 PDF电子书下载 带书签目录 高清完整版

    4. 多媒体支持:无需依赖插件,HTML5原生支持音频(audio)和视频(video)播放,简化了多媒体内容的嵌入。 5. Canvas 和 SVG:HTML5增加了对Canvas元素的支持,允许通过JavaScript在网页上绘制图形。另外,SVG(可...

    html5黑色大气的个人博客全屏滚动个人主页源码下载 HTML+JS+CSS

    例如,`&lt;header&gt;`、`&lt;footer&gt;`、`&lt;nav&gt;`等元素使得网页结构更加清晰,同时`&lt;canvas&gt;`和`&lt;video&gt;`元素让开发者可以直接在网页上绘制图形和播放多媒体内容。在本源码中,全屏滚动效果很可能是通过HTML5的新特性实现的...

    基于html5和css3响应式全屏滚动页面切换效果

    此外,HTML5的`History API`可以实现无刷新的页面跳转,保持URL的可书签性和分享性。 至于提供的文件"2015-03-04-html5-page-change",这可能是项目源代码或示例教程,包含实现这种效果的具体代码。通过分析和学习...

    uniapp移动端H5在线预览PDF等文件实现源码及注解

    此外,对于其他类型的文件,如图片、文档等,uniapp可能有更直接的API支持,或者你可以借助HTML5的`&lt;img&gt;`、`&lt;video&gt;`等元素配合后端API来实现。 总之,通过uniapp与PDF.js的结合,开发者可以轻松地在H5环境下实现...

    html5素材压缩包

    HTML5的`&lt;video&gt;`标签使得在网页上嵌入视频成为可能,用户可以控制播放、暂停、快进等功能,无需依赖Flash等插件。 4. **图标使用**:`ICON`通常指的是网站图标,如favicon,它显示在浏览器地址栏、书签和新标签页...

    html5中文api

    HTML5是下一代超文本标记语言,它为网页和应用程序提供了更强大的功能和更丰富的交互性。这个"html5中文api"资源是一个专为中文用户设计的学习工具,包含了HTML5的开发手册,以CHM(Compiled Help Manual)格式提供...

    HTML5 权威指南 高清,带目录

    媒体元素如和&lt;video&gt;,使得在HTML5页面中嵌入音频和视频变得直接而简单,无需第三方插件。 canvas是HTML5中的一个绘图区域,通过JavaScript API可以进行动态图形绘制,实现各种视觉效果。svg则提供了矢量图形的支持...

    folder-html5网站模版源码

    通过学习这个HTML5模板,你可以了解到如何组织一个现代网站的文件结构,如何使用HTML5新标签创建语义化的网页,以及如何结合CSS3和JavaScript实现动态效果。同时,也可以深入理解如何利用HTML5的离线存储、地理定位...

    m3u8播放器源码 ,ckplayer播放m3u8

    【m3u8播放器源码与CKPlayer的使用详解】 ...综上所述,理解并利用CKPlayer的m3u8播放器源码,可以轻松地在网页上实现m3u8视频的播放,同时通过源码的修改,可以定制播放器的行为,满足特定的需求。

    HTML5程序设计 【第2版、中文版】

    此外,HTML5还新增了多媒体元素,如`&lt;audio&gt;`和`&lt;video&gt;`,使得在网页中嵌入音频和视频内容变得更加简单,并提供了强大的API来控制媒体播放。 HTML5还引入了Canvas API和SVG技术,极大地增强了网页的图形表现能力。...

    HTML,超炫离子

    和&lt;video&gt;标签允许开发者直接嵌入媒体源,并提供了控制选项,如播放、暂停、音量调节等。 3. **离线存储**:HTML5的离线存储功能(离线存储API或Web Storage)使得网页能在离线状态下访问部分数据,提高了用户体验...

    基于HTML5开发的WebApp阅读器.zip

    HTML5的拖放API(Drag and Drop)让WebApp阅读器可以实现更直观的内容导入方式,用户可以方便地从电脑或云端服务中拖拽文件到阅读器内进行阅读。此外,Canvas元素提供了动态图形绘制的能力,可用于创建互动式的图表...

    html帮助文档 htmlhelp

    7. **HTML5**:最新的HTML标准,引入了许多新元素和API,如`&lt;canvas&gt;`用于绘图,`&lt;video&gt;`和`&lt;audio&gt;`用于多媒体播放,以及`&lt;localStorage&gt;`和`&lt;sessionStorage&gt;`用于本地数据存储。 8. **响应式设计**:HTML5支持...

    HTML与XHTML权威指南(第五版)

    HTML5更注重易用性和浏览器支持,引入了新的元素和API,如`&lt;canvas&gt;`(画布)、`&lt;video&gt;`、`&lt;audio&gt;`和Geolocation API。XHTML1.x则强调规范和结构,更适合于需要严格数据格式的应用场景,比如电子书或XML数据交换。...

    H147_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip

    HTML5的核心特性包括更好的离线存储能力(通过离线存储API如Application Cache),增强的表单控件(如日期选择器、搜索框等),以及对多媒体元素的直接支持,如 `&lt;audio&gt;` 和 `&lt;video&gt;` 标签。这些特性使得开发者...

    videoBookmark:使用WebApp对视频中的点添加书签以方便回放

    通过JavaScript,我们可以操控Video元素的各种属性,如播放、暂停、调整音量、获取当前播放时间和总时长等,这些都是实现书签功能的基础。 2. **JavaScript/jQuery**: 作为主要的客户端编程语言,JavaScript负责...

Global site tag (gtag.js) - Google Analytics