视频音频及base64
本章节主要对视频video,音频audio以及base64的图片进行处理,同时利用浏览器调用摄像头等功能实现截图
音频控制
音频控制
- src指音乐文件地址
- controls是否显示控制台
- autoplay音频是否自动播放,在chrome浏览器里面,该属性失败,必须要发生交互行为( click,touch等)以后才会自动播放音乐,其它浏览器正常使用
- duration指当前音乐的时长
- currentTime代表当前音乐播放的时间
- volume控制当前音乐的声音大小,值为0~1
- playbackRate用于控制当前音频文件的播放速度倍数,默认是1为正常速度
- paused用于判断当前的音乐是否已经暂停,与它相对应的是played,这指时间线
- play()播放当前音乐的方法,pause()暂停音乐的方法
- onplay代表音乐播放的时候所触发的事件
- onpause代表音乐暂停的时候所触发的事件
- oncanplay代表音乐已加载完成,可以播放(音乐加载完成以后触发的事件)
- ontimeupdate音乐播放的时候,时间进度条会改变,这个时候就会触发这个事件
- loop循环播放属性
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>音乐播放</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/font_1307637_zb6kiusqsa9.css">
<style>
.circle {
width: 200px;
height: 200px;
background-image: url("./img/40739.jpg");
background-size: 100% 100%;
border-radius: 50%;
animation: playingMusic 10s linear infinite paused;
}
.icon-bofang-yuanshijituantubiao {
font-size: 56px;
background-color: rgba(0, 0, 0, 0.3);
border-radius: 50%;
color: white;
cursor: pointer;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
@keyframes playingMusic {
from {
transform: rotateZ(0deg);
}
to {
transform: rotateZ(360deg);
}
}
.box {
width: 200px;
height: 200px;
position: relative;
}
.progress {
width: 500px;
height: 5px;
/* border: 1px solid lightgray; */
box-shadow: 0px 0px 10px 3px lightgray;
box-sizing: border-box;
border-radius: 5px;
background-image: linear-gradient(to right, red, red);
background-size: 0%;
background-repeat: no-repeat;
cursor: pointer;
margin:0px 20px;
}
.musicBox{
display: flex;
align-items: center;
}
.progressBox{
display: flex;
align-items: center;
}
</style>
</head>
<body>
<audio id="bgm" src="./music/17.mp3"></audio>
<div class="musicBox">
<div class="box">
<div class="circle">
</div>
<span class="iconfont icon-bofang-yuanshijituantubiao"></span>
</div>
<!-- 写个进度条 -->
<div class="progressBox">
<span class="c_time">0:00</span>
<div class="progress"></div>
<span class="d_time">0:00</span>
</div>
</div>
</body>
<script>
var playImage = document.querySelector(".circle");
var iconControl = document.querySelector(".box>.iconfont");
var bgm = document.querySelector("#bgm");
var progress = document.querySelector(".progress");
var d_time=document.querySelector(".d_time");
var c_time=document.querySelector(".c_time");
iconControl.addEventListener("click", function () {
if (bgm.paused) {
bgm.play();
} else {
bgm.pause();
}
});
bgm.onplay = function () {
playImage.style.animationPlayState = "running";
iconControl.classList.add("icon-xinbaniconshangchuan-");
}
bgm.onpause = function () {
playImage.style.animationPlayState = "paused";
iconControl.classList.remove("icon-xinbaniconshangchuan-");
}
bgm.ontimeupdate = function () {
//音乐当前是时间
var currentTime = bgm.currentTime;
var duration = bgm.duration;
var result = currentTime / duration * 100 + "%";
progress.style.backgroundSize = result;
var n=parseInt(bgm.currentTime);
var munites=parseInt(n/60).toString().padStart(2,"0");
var second= (n%60).toString().padStart(2,"0");
c_time.innerText=munites+":"+second;
}
bgm.oncanplay=function(){
var n=parseInt(bgm.duration);
var munites=parseInt(n/60).toString().padStart(2,"0");
var second= (n%60).toString().padStart(2,"0");
d_time.innerText=munites+":"+second;
}
progress.addEventListener("click", function (event) {
var left = event.clientX-progress.getBoundingClientRect().left;
bgm.currentTime = left/progress.clientWidth*bgm.duration;
});
</script>
</html>
效果图
视频控制
视频的很多属与音频保持一致,其中还有一些独特的属性
- requestFullscreen()方法,设置当前视频会全屏状态
- document.exitFullscreen ()方法,退出视频全屏状态
- poster海报,设置当前视频在没有开始播放的时候的海报
- requestPictureInPicture()开启画中画播放
- document.exitPictureInPicture()退出画中画
- 可以利用canvas的drawImage来进行截图
第三方框架video.js
在页面使用视频的时候,请参考video.js的框架来进行设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>video.js使用</title>
<!-- 使用框架之前,先把这两个文件导入进去 -->
<link rel="stylesheet" href="./js/videojs/video-js.css" type="text/css">
<style>
#v1 {
margin: auto;
}
</style>
</head>
<body>
<video id="v1" class=" video-js vjs-default-skin" controls preload="none" width="800" height="600"
poster="./img/40739.jpg">
<source src="./video/01.mp4" type="video/mp4">
</video>
</body>
<script src="./js/videojs/video.js" type="text/javascript"></script>
<script>
//需要调用框架里面的videojs这个方法
var v1 = videojs("#v1", {
autoplay: false
}, function () {
//你的视频加载完成以后会触发的回调函数,返回当前视频对象 就是oncanplay的事件触发
console.log("视频加载成功");
console.log(this); //指向Player这个对象 也就是返回的对象v1
});
v1.on('pause', function () {
var modal = v1.createModal('我是一个文本框 ,我可以在里面放很多的东西');
modal.on('modalclose', function () {
v1.play();
});
});
</script>
</html>
得到 v1对象以后,这个对象就是这个视频控制对象,可以在里面进行相应的视频控制,全屏,退出全屏,画中画以及其它的第三方操作都在这里面
webSocket基础
什么是socket?
套接字(socket)是一个抽象层,应用程序可以通过它发送或接收数据,可对其进行像对文件一样的打开、读写和关闭等操作。套接字允许应用程序将I/O(input/output)插入到网络中,并与网络中的其他应用程序进行通信。网络套接字是IP地址与端口的组合。
$ ipconfig
$ netstat -ano
socket其实就是计算机应用程序用于发送或接收数据的一种技术或方式,它使用的是IP地址+端口的组合
webSocket其实就是服务器与浏览器之间的通讯方式,浏览器可以向服务器发送信息,服务器也可以向浏览器发送信息
webSocket分为两部分,一个是服务器,一个是浏览器,服务器现在我们暂时不做考虑,我们以浏览器为主
服务器代码
const ws = require("nodejs-websocket");
const createServer = () => {
let server = ws.createServer(connection => {
console.log(connection);
connection.on('text', function (result) {
//console.log('收到消息', result);
//接收到消息以后,然后再进行转到,发送到每一个客户端
broadcast(server,result);
})
connection.on('connect', function (code) {
console.log('开启连接', code)
})
connection.on('close', function (code) {
console.log('关闭连接', code)
})
connection.on('error', function (code) {
console.log('异常关闭', code)
})
});
return server;
}
// 服务端广播
function broadcast(server, msg) {
//把连接到当前服务器上面的所以浏览器连接遍历一次,然后向它们发送消息
//把接收到的消息转发给了其它的客户端
server.connections.forEach(function (conn) {
conn.sendText(msg);
})
}
let server=createServer();
//利用9999这个端口,来开启服务器的WebSocket
server.listen(9999,function(){
console.log("服务开启成功");
})
客户端代码
第一步:在浏览器端我们要先创建WebSocket的对象,window对象下面自带这一个构造函数, 我们只需要new这一个构造函数就可以了
var ws=new WebSocket(url地址);
这个url地址指的就是WebSocket的服务器地址,因为我们的客户端要向服务器进行通讯
我们已经知道端口号是9999,并且知道要通讯的服务器IP地址是192.168.6.177,这个时候,我们就可以进行如下参数构造
var ws=new WebSocket("ws://192.168.6.177:9999");
第二步:主要事件
- onopen当WebSocket打开的时候会触发
- onclose当WebSocket关闭的时候触发
- onerror当服务器错误的时候触发
- onmessage当收到服务器的消息的时候触发,服务器的消息在event.data这个属性里面
var ws=new WebSocket("ws://192.168.6.177:9999");
ws.onopen=function(event){
//代表websocket被建立,并打开的时候触发的事件
console.log("WebSocket已打开");
// console.log(event);
}
ws.onclose=function(event){
console.log("WebSocket已关闭");
}
ws.onerror=function(event){
console.log("WebSocket发生了错误");
}
ws.onmessage=function(event){
//代表服务器向自己发送了消息
console.log(event.data);
}
**第三步:**浏览器向服务器发送消息
主要使用的是就是send()
的方法,它接收一个字符串
ws.send("hello world");
整个WebSocket在客户的应用就只有一个构造,四个事件,一个方法
图片base64转化
我们在网页里面有一个特殊的对象FileReader,这个对象可以把图片转换成base64的格式,通过base64的方式,我们选中的图片可以直接显示在页面上面,后期,我们也可以使用它进行图片的传输
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>base64</title>
</head>
<body>
<input type="file" id="f1" onchange="fileChange(this)" style="display: none">
<button type="button" onclick="this.previousElementSibling.click()"></button>
<img src="" id="img1">
</body>
<script>
var f1=document.querySelector("#f1");
var img1=document.querySelector("#img1");
function fileChange(obj){
var file=obj.files[0];
var fr=new FileReader();
fr.onload=function(event){
var e=event||window.event;
//console.log(e.currentTarget.result);
img1.src=e.currentTarget.result; //直接把base64赋值到了我们的图片地址上面
}
fr.readAsDataURL(file);
}
</script>
</html>
浏览器对摄像头与录音设备的访问
在HTML5里面,已经允许浏览器对当前访问者的报像头与话筒等设备进行访问,但是它有一定的限制
-
只能通过本地方访问,不能通过远程地址访问
file:///D:/H1904/0831/code/083102/02.html
或
http://127.0.0.1:5500/02.html
而不能使用下面的远程地址
http://192.168.6.254:5500/02.html
如果使用本地访问可以正常的使用
navigator.getUserMedia
这个方法,如果如果是远程访问,则不行 -
如果要在远程地址上面使用摄像头,则必须使用加密协议HTTPS
https://www.softeem.xin/views/video.html
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>浏览器调用视频与音频</title>
<style>
#c1{
border:1px solid black;
}
</style>
</head>
<body>
我要在这里获取浏览器的摄像头
<video id="v1" width="800px" height="600px"></video>
<button type="button" id="btn1" onclick="takePhoto()">拍照</button>
<canvas width="800px" height="600px" id="c1" style="display:none"></canvas>
<img src="" id="img1" width="800px" height="600px">
</body>
<script>
var v1=document.querySelector("#v1");
var c1=document.querySelector("#c1");
var img1=document.querySelector("#img1");
//我们在这里要根据不同的浏览器去调用不同的方法
navigator.getMedia = navigator.getUserMedia ||
navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia ||
navigator.msGetUserMedia;
navigator.getMedia({
video: true, //使用摄像头对象
audio: false //不使用音频
}, function (stream) {
//去年11月的时候
// v1.src=URL.createObjectURL(stream); 去年11月都还是这么写
//获取成功以后
v1.srcObject=stream; //新的方法
v1.play();
},function(err){
//获取失败以后
console.log(err);
});
function takePhoto(){
//console.log(c1);
var ctx=c1.getContext("2d");
//画一个图片,在这里,我们是直接从视频里面进行了截图
ctx.drawImage(v1,0,0,800,600);
//把canvas里面的图片转换成base64格式
img1.src=c1.toDataURL("image/jpeg");
}
</script>
</html>
评论区