H5新增video标签的常用属性
原文地址：https://blog.csdn.net/nihaio25/article/details/120263499
video
在video标签出现之前，如果想在网页中播放视频或者音频数据是非常困难的。H5中的video标签可以向使用img显示图片一样简单去播放视频。
video提供了很多属性和方法，我们可以通过直接设定或者通过js控制视频的显示
读写属性 src autoplay poster loop constrols width height 宽高一般不一起使用
constrols是控制条 loop是循环播放 autoplay是自动播放poster=’’ 封面 放封面地址 muted静音
方法 play播放 pause暂停 paused切换，是否是暂停状态 volume控制音量 currentTime当前播放秒数 playbackRate倍数播放
常用属性
1.属性
1.进度条controls
<video src="./音视频/1.mp4" controls> </video>
2.页面一加载是否自动播放autoplay
<video src="./音视频/1.mp4" controls autoplay> </video>
3.post封面
<video src="./音视频/1.mp4" poster='./img/1.jpg'> </video>
4.是否循环播放loop
<video src="./音视频/1.mp4" controls loop> </video>
5.muted静音
<video src="./音视频/1.mp4" controls loop autoplay> </video>
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./1-jquery.3.6.0.js"></script>
<style>
video{
width: 400px;//宽高一般设置只设置一个，让它等比例分配；
}
</style>
</head>
<body>
<!-- loop循环播放 autoplay--自动播放 muted> poster封面-->
<video src="./音视频/1.mp4" controls loop ></video>
<div class="button">
<button>播放</button>
<button>暂停</button>
<button>切换</button>
<button>音量+</button>
<button>音量-</button>
<button>快进</button>
<button>回退</button>
<button>倍速的播放</button>
</div>
<script>
$(function(){
var button=$('.button');
console.log(button);
//获取video
var video=$('video')[0];
//button 点击之前做一些事情
button.on('click','button',function(){
//播放
if($(this).text()==='播放'){
video.play();
}
//暂停
else if($(this).text()==='暂停'){
video.pause();
}
//切换要做判断，当前状态是暂停就播放，播放就暂停
else if($(this).text()=='切换'){
if(video.paused){//注意单词别写错
video.play();
}else{
video.pause();
}
}
//做音量的加
else if($(this).text()==='音量+'){
console.log(video.volume);
video.volume=(video.volume>0.9?0.9:video.volume )+0.1
}
//做音量的减
else if($(this).text()==='音量-'){
console.log(video.volume);
video.volume=(video.volume<0.1?0.1: video.volume)-0.1;
}
// 快进
else if($(this).text()==='快进'){
video.currentTime+=5;
}
//回退
else if($(this).text()==='回退'){
video.currentTime-=5;
}
// 倍速的播放
else if($(this).text()==='倍速的播放'){
video.playbackRate=5;
}
})
video.οnvοlumechange=function(){
// console.log('音量改变事件监听')
if(this.volume===0.5){
alert('继续调高声音会损伤耳膜')
}
}
})
</script>
</body>
</html>
H5新增video标签的常用属性相关推荐
- audio标签与video标签的常用属性及方法
一.常用的css属性 1.src:用于指明video标签需要播放的音频的地址 --<audio sec = "音频地址"> < ...
- html5video标签属性,H5中video标签那些属性和方法
前言 最近在写一个自定义播放器, 写之前我们肯定要把播放器的属性和方法全部过一遍,知彼知己,方能百战不殆嘛...后面会把自己写的播放器和踩过的一些坑也上传上来 video标签行内属性 src:视频的U ...
- 微信开发中，H5的video标签使用
<video></video>是HTML5新加入的标签,最近流行的h5开发多以video技术集成一个H5页面,效果也是很6的.现在总结一下用到的技术,主要的使用环境是微信,部分 ...
- H5 视频Video 元素及常用事件 播放 暂停 初始化 设置播放时间禁用下载等
H5 视频Video 元素及常用事件 播放 暂停 初始化 设置播放时间 常用属性 自动播放: autoplay 显示常用工具栏: controls 是否重复播放: loop 视频总长度: durati ...
- 微信浏览器video标签没有封面_微信h5页面video标签用法总结
最近做的些web页面,内嵌许多小视频,在ios和安卓手机上播放时,遇到不少问题:在微信浏览器内播放时,视频会自动全屏 如果每个视频都有一张自定义的图片作为封面,在显示视频的同时,如果没有给这个视频设置 ...
- winform公共标签和常用属性
winform公共标签和常用属性 公共控件 1.Button(按钮): Enabled :确定是否启用控件 Visible:确定控件是否可见 2.CheckBox(多选项) CheckListBox ...
- IPhone微信H5用Video标签播放不了视频
H5用Video标签播放视频 视频在安卓上可以正常播放,在苹果上却不能播放. 因为用了文件服务站点,而且不支持断点下载 把文件服务改成支持断点下载即可 断点下载参考(C#) 转载于:https://w ...
- html5中preload是什么意思,html的video标签的preload属性详解
--------------------------------------------------------- Ta 只分享的内容开始 ------------------------------ ...
- bean标签的常用属性
这篇文章总结spring中bean标签的常用属性. bean标签常用属性有: id name class factory-method factory-bean init-method destory ...
最新文章
- 关于box2d相关学习教程记录一下
- 用-force –opengl 指令_OpenGL-使用Tessellation技术绘制Cubic Bézier Patches
- jvm 性能调优工具之 jstat
- Android NDK开发（1）----- Java与C互相调用实例详解
- Python3 CookBook | 数据结构和算法（一）
- 资深UI设计师告诉你：交互设计师必须具备的4项能力
- k8s 集群全部更换机器 IP
- python数学公式编辑工具_GNU TeXmacs
- 鸡兔同笼python程序怎么写_梦见鸡_周公解梦梦到鸡是什么意思_做梦梦见鸡好不好_周公解梦官网...
- 李智慧 - 架构师训练营 第五周
- Win10系统去掉桌面图标小箭头导致打开管理和任务栏处图标报错，且右键开始菜单无反应
- 【转】《飞鸟集》325首全文
- Android 7.1.1源码下载
- 赛效：如何在线更改图片格式 图片格式在线转换方法介绍
- 135编辑器如何插入文件
- SpringBoot中使用Easyexcel实现Excel导入导出功能（三）
- 【2021CCF基线系统】基于飞桨实现系统认证风险预测-异常检测
- 如何在SpringBootOAuth服务器中实现双因素认证？第二部分：Under the Hood
- Node.js 高级篇（六）：手把手教你使用和理解 Multer 实现文件上传，包懂 O(∩_∩)O~
- Android学习博客和文章存档