HTML5播放器之“视频锚点”

最新推荐文章于 2022-05-09 14:57:02 发布
最新推荐文章于 2022-05-09 14:57:02 发布
阅读量1.4k 收藏 1
点赞数
分类专栏： HTML 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JNiantic/article/details/115605136
版权
本文介绍了如何使用HTML5播放器实现类似B站视频时间线的锚点跳转功能，通过JavaScript操作video对象，调整播放位置。文章还列举了video对象的一些常用属性和方法。
摘要由CSDN通过智能技术生成

最近在B站刷视频看到评论区出现蛮多的科代表列出视频的时间线，点击即可直接使视频播放到指定的位置，很好奇是怎么实现的，所以尝试用HTML5播放器还原一下B站的场景。

实现的代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			a{
    
				color: #409EFF;
				text-decoration: none;
			}
			.main{
    
				max-width: 1080px;
				margin: 0 auto;
			}
			.fr{
    
				float: right;
			}
			
			.user-comment{
    
				margin-left: 1rem;
			}
最低0.47元/天 解锁文章
逝水经年
关注
专栏目录
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6390
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
时间线控件，视频播放时间控制
10-24
自定义控件开发，时间范围选择控制，用于视频播放的时间段选择，开发者可进行二次开发，开发语言C#，框架.net framework
HTML实现自动播放视频与音乐文件和锚点的介绍
qq_41651216的博客
10-11 1695
HTML5中的video和audio标签中有一个autoplay属性，添加这个属性后就会在文件加载完成后自动播放。 代码：  video： &lt;videoautoplay="autoplay"&gt;&lt;sourcesrc="视频路径"/&gt;&lt;/video&gt; audio： &lt;audioautoplay="autoplay"&gt;&lt;so
关于html页面添加锚点动画的原理
weixin_40785842的博客
05-10 4411
原始的添加锚点不做处理的话会很生硬的跳到锚点处，给用户带来的体验度很差，这时就需要添加一些动画做一下过度。好了，回到正题：首先看代码：    HTML:&lt;div&gt;&lt;a id="hs_myid" href="#a1"&gt;&lt;/a&gt;&lt;/div&gt; &lt;div&gt; &lt;p class="hs"&gt;&a
pr锚点
u014207606的博客
03-13 7693
这期我们来讲锚点 锚点是个什么鬼？ 如图中所示，我们点击一段素材后 在效果控件一栏会有锚点选项 在主窗口，中心的圆点就是锚点了 默认状态下锚点在视频的中心位置 “锚点”和我们之前提到的“位置” 看似都是视频的一个坐标信息 但实际上二者是不一样的 这里拿旋转举例是最好的 如果默认锚点是在视频的中心位置，我们为它设置两个旋转的关键帧 那么它会这样运动 图片永远围绕着中心点运动 但当我们用鼠标指针...
html里面可以加锚文本吗,html5中的嵌套锚文本(nested anchor texts in html5)
weixin_34688784的博客
06-15 179
html5中的嵌套锚文本(nested anchor texts in html5)我知道HTML 4( 规范 )中不允许嵌套锚标签。 关于HTML 5我不太确定：只要在其中没有交互式内容(例如按钮或其他链接)，a元素可以围绕整个段落，列表，表格等，甚至整个部分。我知道没有href属性的元素不是链接。 嵌套锚是否有效，如果内部锚没有href属性？I know that nesting of anc...
HTML5基本语法.txt
05-31
HTML5引入了新的媒体元素来播放音频和视频。 - **视频播放器**： - `视频路径" controls="controls">不支持video标签</video>`：嵌入视频。 - `src`：视频文件路径。 - `controls`：显示播放控件。 - `...
HTML5学习笔记
m0_61721166的博客
03-08 8993
一、网页 1.什么是网页 网站是指在因特网上根据一定的规则，使用 HTML等制作的用于展示特定内容相关的网页集合。 网页是网站中的一“页” ，通常是 HTML 格式的文件，它要通过浏览器来阅读。 网页是构成网站的基本元素，它通常由图片、链接、文字、声音、视频等元素组成。通常我们看到的网页，常见以.htm或.html 后缀结尾的文件，因此将其俗称为HTML文件。 2.什么是HTML HTML指的是超文本标记语言(HyperTextMarkupLanguage)，它是用来描述网页的一种语言。HTML不
HTML入门三（超链接，音频，视频）
qq_44872688的博客
10-08 2336
文章目录一、超链接是什么？二、超链接标签1.基本格式2.锚点链接（1）创建步骤（2）举例3.音频（1）音频标签的基本格式（2）举例4.视频（1）视频标签的基本格式（2）举例三、强调 一、超链接是什么？        超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网
C++视频流转发实现
04-16
StreamServer.h里定义了下面两个接口, Demo里对这个接口进行了实现, 循环放10张图 struct StreamReader { virtual int GetData(char* buffer, int* length, unsigned long* sequence, unsigned long* timestamp) = 0; virtual ~StreamReader(){} }; struct StreamReaderFactory { virtual StreamReader* CreateStreamReader(int channel) = 0; };
php html5播放视频,HTML5 Video(视频)
weixin_42514433的博客
04-15 596
很多站点都会使用到视频. HTML5 提供了展示视频的标准。Web站点上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件(比如 Flash)来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。浏览器支持Internet Explorer 9+, Firefox, Opera, Chrome, 和 Saf...
MarkDown中锚点的使用
chenriyang0306的博客
08-16 3135
【锚点简介】锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。 英文名：anchor 使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。 创建到命名锚记的链接的过程分为两步。首先，创建命名锚记，然后创建到该命名锚记的链接。【锚点用法】 建立
什么是锚点？锚点的用法
热门推荐
sevenfish77的博客
04-16 1万+
锚点：是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍。     英文名：anchor锚点用法：锚点用id属性来设置，一个a标签如果id属性(或者name属性--现在较多不支持），那么就是页面的一个锚点。         &lt;a id="anchor"&gt;我的作品&lt;/a&gt;         或者：         &lt;...
videojs实现视频打点标记 Vue
teddy_Ma的博客
05-07 2895
videojs实现视频打点标记 Vue
web视频播放器videojs
sunddy_x的博客
08-17 5088
Video.js是一款web视频播放器，支持html5和flash两种播放方式。更有自定义皮肤，插件，组件，语言还有丰富的选项配置。 npm安装 npm install --save-dev video.js 在vue页面引入js和css import videojs from 'video.js' import 'video.js/dist/video-js.css' 创建播放器 <video class="video-js"> <source src="https://v
video.js的坑点和自定义video的播放、全屏、快进操作
sinat_35082096的博客
05-09 6424
一、使用插件video.js 遇到问题：点击背景视频无法触发播放和暂停的操作 问题原因：在移动端使用video.js与fastclick 冲突 解决方式：修改fastclick的源码 FastClick.prototype.needsClick = function(target) { switch (target.nodeName.toLowerCase()) { // Don't send a synthetic click to disabled inputs (issue #62) c
前端插件之锚点动画跳转
蜗牛的博客
08-31 1831
1.js代码 jQuery(document).ready(function($) { $(".index_nav li a").click(function(event) { var index=this.title var id='#'+'index_'+index $("html,body").animate({scrollTop: $(id).
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值