本地存储和音视频的属性和方法

本地存储

音视频的属性及方法

音视频的方法

音视频属性

音视频的事件

本地存储

本地存储持久性存储技术 (浏览器关闭不会自动消失) 存储大小5MB左右

同源策略存储协议域名端口号都一致称之为同源

localStorage.setItem(key,val); 设置

localStorage.getItem(key); 获取

localStorage.removeItem(key); 移除

localStorage.clear(); 全部清空

   // 设置// key是唯一的，如果设置的时候key相同，后边设置的覆盖前边的//设置的时候自动转为字符串进行存储 localStorage.setItem("user", "hello");localStorage.setItem("user1", 100);localStorage.setItem("user", true);//对象存储的时候 -> '[object Object]'  ->存储localStorage.setItem("user2", JSON.stringify({name: "张三",age: 100,hobby: "篮球"}));// 获取console.log(localStorage.getItem("user"));console.log(localStorage.getItem("user1"));console.log(JSON.parse(localStorage.getItem("user2")));// 获取不到返回nullconsole.log(localStorage.getItem("hello"));// 移除// localStorage.removeItem("user");// localStorage.removeItem("user1");// localStorage.removeItem("user2");// localStorage.removeItem("Hm_lvt_bdb993b828cbe079a7fbc1a951f44726");// 清空// localStorage.clear();// JSON格式的数据  // 属性名和属性值都要用双引号抱起来// 在js中JSON格式对象和普通对象没有什么区别 var obj = {name: "张三",age: 100,hobby: "篮球"};// JSON.stringify(数据);   将对象转为json格式的字符串var jsonStr = JSON.stringify(obj);console.log(jsonStr);// JOSN.parse(数据);   将字符串转为json格式的对象var jsonObj = JSON.parse(jsonStr);console.log(jsonObj);

 // 绑定提交的事件// 表单元素的方法// 表单元素.focus();// 表单元素.blur();loginForm.onsubmit = function () {// 所有的输入框都验证通过才提交给服务器tel.focus();pass.focus();pass.blur();var resBool = arr.every(function (val, index) {return val == true;});// 判断是否都验证通过if (resBool) {var user = localStorage.getItem("user");// 本地没有存储if (!user) {alert("还没有注册");login.style.display = "none";showRegister();return false;}// 本地有存储用户名和密码匹配// 先将当前JSON格式的字符串转为JSON格式对象user = JSON.parse(user);if (user.tel == tel.value && user.pass == pass.value) {alert("登录成功了");login.style.display = "none";myLogin.style.display = "none";myUser.style.display = "inline-block";return false;}// 本地存储了但是用户名和密码不匹配alert("没有当前用户，请注册");login.style.display = "none";showRegister();}return false;  //阻止表单元素提交行为}

音视频的属性及方法

音视频的方法

play(); 播放

pause();暂停

音视频属性

paused:当前音视频是否处于暂停状态是暂停:true 不是暂停：false

muted:当前音视频是否处于静音状态是静音:true 不是静音:false

volume:音量默认值是1 [0,1] 超出这个范围会报错

duration:总时长单位是s 必须在元数据加载完毕才能获取到

currentTime:当前时长，音视频的已经播放的时间单位s

playbackRate:以几倍速进行播放默认值1

音视频的事件

loadedmetadata 元数据加载完毕触发的事件

timeupdate:音视频播放过程中实时触发

volumechange:音量改变触发的事件

ratechange:倍速改变触发的事件

onplay:音/视屏播放事件

ended:播放结束

<div id="videoWrap" class="videoWrap"><!-- poster:占位图 --><video controls id="video" poster="../../day19小U课堂/代码/img/videoDetail/san.png"><!-- 存在兼容问题不同浏览器的兼容性不同 --><source src="../../day19小U课堂/代码/video/movie1.mp4" /><source src="../../day19小U课堂/代码/video/movie1.mp4">以上都不支持,请换一个浏览器</video></div><div><button>播放/暂停</button><button>静音/不静音</button><button>音量+</button><button>音量-</button><button>快进</button><button>快退</button><button>倍速播放</button></div><script>var video = document.getElementById("video");var btns = document.getElementsByTagName("button");// 播放btns[0].onclick = function () {// 判断是否是暂停状态if (video.paused) {video.play();} else {video.pause();}}// 静音/不静音btns[1].onclick = function () {video.muted = !video.muted;}// 音量+btns[2].onclick = function () {var volume = video.volume;volume += 0.1;if (volume >= 1) {volume = 1;}video.volume = volume;// console.log(volume);}// 音量-btns[3].onclick = function () {var volume = video.volume;volume -= 0.1;if (volume <= 0) {volume = 0;}video.volume = volume;// console.log(volume);}// 快进btns[4].onclick = function () {video.currentTime += 1;}// 快退btns[5].onclick = function () {video.currentTime -= 1;}btns[6].onclick = function () {console.log(video.playbackRate);video.playbackRate = 5;}// 绑定事件// loadedmetadata  元数据加载完毕触发的事件video.addEventListener("loadedmetadata", function () {console.log(video.duration);});// timeupdate:音视频播放过程中实时触发video.addEventListener("timeupdate", function () {// console.log(video.currentTime);});// 音量改变触发的事件video.addEventListener("volumechange", function () {console.log(video.volume);});// ratechange:倍速改变触发的事件video.addEventListener("ratechange", function () {console.log(video.playbackRate);});// onplay:音/视屏 播放事件video.addEventListener("play", function () {console.log("播放了");});// ended:播放结束video.addEventListener("ended", function () {console.log("结束了");});</script>

本地存储和音视频的属性和方法相关推荐

怎么让抖音视频当做铃声android,抖音怎么提取视频里的音乐？怎么将抖音里的音乐用来做手机铃声？抖音视频提取音频的方法...
虽然说抖音发展到现在,褒贬不一,但是架不住人家火啊,现在的人大都喜欢捧着个手机刷抖音,来打发一些碎片时光.抖音不仅带火了短视频,同样也带火了视频里面的背景音乐,许多我们平时并没有听过的歌曲在抖音上就慢 ...
计算机抖音怎么可以弄出音乐,抖音怎么提取视频里的音乐？怎么将抖音里的音乐用来做手机铃声？抖音视频提取音频的方法...
虽然说抖音发展到现在,褒贬不一,但是架不住人家火啊,现在的人大都喜欢捧着个手机刷抖音,来打发一些碎片时光.抖音不仅带火了短视频,同样也带火了视频里面的背景音乐,许多我们平时并没有听过的歌曲在抖音上就慢 ...
网页测试本地服务器_音视频开发搭建一个直播服务器
现在抖音.快手等直播实在是太火了,因此对音视频的开发非常感兴趣.查阅了相关资料,使用Nginx搭建一个简单的直播跟点播流媒体服务器,能够实时推流到服务器,同时在网页端播放直播的视频. 先上效果使用O ...
datagrid 重载本地数据_音视频系列3：使用ffmpeg + nginx搭建本地转发服务器
本文与csdn博客同步:https://blog.csdn.net/Hanghang_/article/details/104893135,欢迎关注,点赞,评论. 前言音视频系列: HectoorZ ...
Wed APIS-Window对象、本地存储、数组的map（）方法、数组的join（）方法
目录 Window对象 1.BOM(浏览器对象模型) 2.定时器-延时函数 3.JS执行机制 4.location对象 5.navigator对象 6.histroy对象本地存储 1.分类 1.1. ...
快手抖音视频号涨粉方法技巧
大多数人玩抖音快手,一周可以有几百个粉丝上千粉,而有些人却几个月半年都没有上百个粉,原因其实就是两种情况.一种是没有发布优秀的视频,另一种是不懂得技巧. 短视频行业内的达人都清楚,现在运营无真人短视频 ...
处理音视频合并的简单方法
版权申明:未经允许请勿转载.转载前请先联系作者(hello@yeshen.org) 上午朝瑾问我能不能去掉MV中的人声.我第一感觉是要做声音识别处理什么的.但是仔细听了下,好像要求是挺简单的,她有一个 ...
Android音视频学习系列(七) — 从0~1开发一款Android端播放器(支持多协议网络拉流本地文件)
系列文章 Android音视频学习系列(一) - JNI从入门到精通 Android音视频学习系列(二) - 交叉编译动态库.静态库的入门 Android音视频学习系列(三) - Shell脚本入门 ...
Android音视频学习系列(六) — 掌握视频基础知识并使用OpenGL ES 2.0渲染YUV数据
系列文章 Android音视频学习系列(一) - JNI从入门到精通 Android音视频学习系列(二) - 交叉编译动态库.静态库的入门 Android音视频学习系列(三) - Shell脚本入门 ...

本地存储和音视频的属性和方法

本地存储

音视频的属性及方法

音视频的方法

音视频属性

音视频的事件

本地存储和音视频的属性和方法相关推荐

最新文章

热门文章