H5的video元素实现的Demo

最新推荐文章于 2023-03-06 16:56:06 发布
最新推荐文章于 2023-03-06 16:56:06 发布
阅读量689 收藏 1
点赞数
文章标签： 视频 H5 Video
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xhl_james/article/details/73304037
版权

利用前一段时间听说是一个国乒选手之间的较量，路过就将其录制了下来。学到H5的Video元素是就将其作为素材写了一个Demo

属性以及说明：

属性

值

说明

src

url

要播放视频的URL

autoplay

autoplay

视频就绪后立刻播放

controls

controls

添加播放、暂停和音量等控件

width

像素

设置视频播放器的宽度

height

像素

设置视频播放器的高度

loop

loop

设置视频是否循环播放

preload

auto/none/metadata

视频在页面加载时开始加载，并预备播放

startTime

 

读取媒体的开始播放时间，通常为0

currentTime

 

读取或修改媒体的当前播放位置

duration

 

读取媒体总的播放时间

volume

0~1

读取或修改媒体的播放音量

muted

true/false

读取或修改媒体的静音状态


常用的方法和事件：

方法/事件

功能

play()

播放媒体，paused属性的值自动修改为false

pause()

暂停播放，paused属性的值自动修改为true

load()

重新载入媒体进行播放

play事件

执行play()方法时触发

pause事件

执行pause()方法时触发

error事件

获取媒体数据错误时触发

timeupdate事件

当前播放位置发生改变时触发

durationchange事件

播放时长被改变


<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>


<body>
<div style="text-align:center">
<button οnclick="playPause()">播放/暂停</button>
<button οnclick="makeBig()">放大</button>
<button οnclick="makeSmall()">缩小</button>
<button οnclick="makeNormal()">普通</button>
<br>
<video id="video1" width="1200">
<source src="Video/pingpang.mp4" type="video/mp4"> 您的浏览器不支持 HTML5 video 标签。
</video>
</div>


<script>
var myVideo = document.getElementById("video1");


function playPause() {
if(myVideo.paused)
myVideo.play();
else
myVideo.pause();
}


function makeBig() {
myVideo.width = 1800;
}


function makeSmall() {
myVideo.width = 600;
}


function makeNormal() {
myVideo.width = 1200;
}
</script>
</body>
</html>


运行结果展示：


Jonny Lin
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Html5Video-master H5播放器demo
11-04
开源HTML5 播放器，拿去随意改吧——————————————————————！！
Html中文乱码
热门推荐
tone1128的博客
10-09 2万+
<!DOCTYPE html> <html> <head> <meta charset="gb2312" /> <title></title> </head> <body> <video id="video" src="htt...
HTML5视频video开发demo例子
xmt1139057136的专栏
11-27 1万+
HTML5的video可以使用DOM的方式进行控制。video元素同样拥有方法、属性和事件。 比如它拥有的方法用于播放、暂停以及加载等。其中的属性（比如时长、音量等）可以被读取或设置。 其中的 DOM 事件能够通知您，比方说，video元素开始播放、已暂停，已停止，等等。 废话少说了，看下面的实例吧。 为视频创建简单的播放/暂停以及调整尺寸控件： 欢迎大家关注我的博客！如有疑
Html5 Video实现示例
03-11
整理的Html5 video实现方案,参考了他人的博客
html5视频demo audio,【前端学习笔记】HTML5中的video和audio
weixin_36019375的博客
06-20 205
标签定义声音，比如音乐或者其他音频流。标签定义视频，比如电影片段或其他视频流。video 和 audio 的优点：都不需要第三方插件就能播放音频和视频，可以直接插入，并且用同一的API接口控制。video 和 audio 的缺点：1)暂时没有对流视频的支持和规范。流媒体分HTTP渐进式下载和实时流式传播，video 和 audio 属于HTTP属于渐进式下载，不需要流媒体服务器，普通HTTP服务器...
H5 简单demo示例模板
最新发布
05-30
3. **多媒体支持**：H5直接支持音频、视频播放，无需Flash插件，`<audio>`和`<video>`标签让媒体元素的使用更加便捷。 4. **Canvas绘图**：提供了一个二维画布，通过JavaScript可以进行动态图形绘制，实现了丰富的...
海康视频H5player播放简单demo
02-27
1. **HTML5 Video API**：H5player基于HTML5的Video元素，利用其原生API提供播放、暂停、音量控制、时间定位等功能。HTML5 Video API是现代网页中处理多媒体内容的基础，支持MIME类型如video/mp4、video/webm等。 2...
h5 rtmp播放demo
01-08
H5中的`<video>`标签是实现视频播放的基础，它可以内联播放视频，支持多种视频格式，如MP4、WebM和Ogg。在RTMP场景下，我们通常需要借助第三方库或插件来实现非标准流协议的支持。 2. **RTMP协议简介：** RTMP由...
简单的appdemo。h5页面
09-11
4. **Audio和Video**：HTML5的和<video>元素简化了音频和视频的嵌入，支持多种格式，并提供播放、暂停、快进等功能。 5. **Web Workers和Web Socket**：Web Workers允许在后台执行计算密集型任务，不阻塞用户界面。...
html5 播放视频DEMO
12-17
html5播放视频的源代码 ，可以播放标准的文件
Html5视频播放小Demo
05-13
里面是使用Html5加CSS样式制作的视频播放小Demo，很简单的实现，加速，减速，全屏，静音，播放，暂停，轮播歌词等功能。
video demo
02-07
video demo
video-demo
03-17
video-demo
VideoDemo:播放本地视频文件的演示
05-17
VideoDemo a demo to play local video file. 分别使用VideoView, SurfaceView, TextureView播放本地视频; 并可以切换为小窗口播放(悬浮窗)
videojs 使用Demo
09-16
videojs 使用Demo
video_demo
Carl in the house
03-06 281
sda
HTML5 <video> - 使用 DOM 进行自定义控制示例
xiaochuandujun的专栏
06-07 1871
HTML5的video虽然可用controls来展示控件，并进行控制播放暂停等，但是不同的浏览器显示的 效果可能不一样，所以很多时候我们需要使用Dom来进行自定义的一些操作和控制。下面是一个小例子。 当然效果不是很美观，若想好看的可以自己设置css样式等。 播放/暂停 大 中 小 您的浏览器不支持此HTML5 视频标签
html5支持视频元素,HTML5 视频(Video)元素使用详解
weixin_42314448的博客
07-04 734
很多站点都会使用到视频. HTML5 提供了展示视频的标准。检测您的浏览器是否支持 HTML5 视频：点击下方“阅读原文”可亲试效果Web站点上的视频直到现在，仍然不存在一项旨在网页上显示视频的标准。今天，大多数视频是通过插件(比如 Flash)来显示的。然而，并非所有浏览器都拥有同样的插件。HTML5 规定了一种通过 video 元素来包含视频的标准方法。HTML5 (视频)- 如何工作如需在 ...
Html5中的Video元素使用方法
weixin_39037804的博客
09-20 1361
现在互联网视频大都使用Flash来实现。但是不同的浏览器可能使用不同的插件。在HTML5中则提供了一个统一的方式来展示视频内容。HTML5 video在Internet Explorer 9, Fir...
h5实现网络拓扑图demo
05-20
以下是一个简单的使用HTML5 Canvas和JavaScript实现网络拓扑图的示例。 HTML代码： ```html <!DOCTYPE html> <html> <head> <title>网络拓扑图Demo</title> <style> canvas { border: 1px solid #333; } </style> </head> <body> <canvas id="topology"></canvas> <script src="topology.js"></script> </body> </html> ``` JavaScript代码： ```javascript // 获取Canvas元素和上下文 var canvas = document.getElementById("topology"); var ctx = canvas.getContext("2d"); // 设置Canvas宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 定义节点类 function Node(x, y, label) { this.x = x; this.y = y; this.label = label; } // 定义连线类 function Link(startNode, endNode) { this.startNode = startNode; this.endNode = endNode; } // 定义节点和连线列表 var nodes = [ new Node(100, 100, "Node 1"), new Node(200, 200, "Node 2"), new Node(300, 100, "Node 3"), new Node(400, 200, "Node 4") ]; var links = [ new Link(nodes[0], nodes[1]), new Link(nodes[1], nodes[2]), new Link(nodes[2], nodes[3]), new Link(nodes[3], nodes[0]) ]; // 绘制节点和连线 function drawTopology() { // 清空画布 ctx.clearRect(0, 0, canvas.width, canvas.height); // 绘制连线 links.forEach(function(link) { ctx.beginPath(); ctx.moveTo(link.startNode.x, link.startNode.y); ctx.lineTo(link.endNode.x, link.endNode.y); ctx.stroke(); }); // 绘制节点 nodes.forEach(function(node) { ctx.beginPath(); ctx.arc(node.x, node.y, 20, 0, 2 * Math.PI); ctx.fillStyle = "#fff"; ctx.fill(); ctx.strokeStyle = "#333"; ctx.stroke(); ctx.fillStyle = "#333"; ctx.font = "12px Arial"; ctx.textAlign = "center"; ctx.textBaseline = "middle"; ctx.fillText(node.label, node.x, node.y); }); } // 监听窗口大小改变事件，重新设置Canvas宽高 window.addEventListener("resize", function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; drawTopology(); }); // 绘制初始状态的拓扑图 drawTopology(); ``` 这个示例中，我们定义了`Node`和`Link`两个类来表示节点和连线，然后创建了一个节点和连线的列表，最后在`drawTopology`函数中根据列表中的节点和连线绘制出拓扑图。我们还监听了窗口大小改变事件，当窗口大小改变时重新设置Canvas宽高并重新绘制拓扑图。 你可以根据自己的需求修改节点和连线的坐标、标签、样式等属性，进一步完善这个示例。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值