JavaScript判断视频编码是否为h.264
作者:互联网
1.视频编码是什么?
现在视频编码主流是h.264,对应着输入格式为AVC
H.264/AVC是2003年制定的视频编码压缩标准 ,集中了以往标准的优点,并吸收了以往标准制定中积累的经验,采用简洁设计,使它比MPEG4更容易推广。H.264创造性了多参考帧、多块类型、整数变换、帧内预测等新的压缩技术,使用了更精细的分象素运动矢量(1/4、1/8)和新一代的环路滤波器,使得压缩性能大大提高,系统更加完善。
有兴趣深入了解可以好好看看
好学直通车
https://baike.baidu.com/item/%E8%A7%86%E9%A2%91%E7%BC%96%E7%A0%81/839038?fr=aladdin
2.获取视频的基本信息
-
我们通过input拿到系统对象e里面的文件信息很有限,而且没有我们想要的东西。
-
引入插件mediainfo.js
这是出色的MediaInfoLib的JavaScript端口, 可以直接在浏览器或Node.js中运行。它使用Emscripten从C ++源代码进行编译 。
github地址https://github.com/buzz/mediainfo.js
看下他的魔法,使用很简单可以直接用CDN
<script type="text/javascript" src="https://unpkg.com/mediainfo.js/dist/mediainfo.min.js"></script>
function base_videoInfo(id) {
const fileinput = document.getElementById(id);
const onChangeFile = (mediainfo) => {
const file = fileinput.files[0]
if (file) {
const getSize = () => file.size
const readChunk = (chunkSize, offset) =>
new Promise((resolve, reject) => {
const reader = new FileReader()
reader.onload = (event) => {
if (event.target.error) {
reject(event.target.error)
}
resolve(new Uint8Array(event.target.result))
}
reader.readAsArrayBuffer(file.slice(offset, offset + chunkSize))
})
mediainfo.analyzeData(getSize, readChunk).then((result) => {
// console.log(result)
// console.log(result.media.track[1].Format)
//result.media.track[1].Format == "AVC"说明是h264
if (result.media.track[1].Format != "AVC") {
}
}).catch((error) => {
console.log(error)
})
}
}
MediaInfo({ format: 'object' }, (mediainfo) => {//format结果值的格式(选择:object,JSON,XML,HTML或text)
fileinput.addEventListener('change', () => onChangeFile(mediainfo))
})
}
看下拿到的东西够不够详细
3.用canvas给上传视频画个缩略图
没用插件之前我是通过先在页面创建video标签然后播放视频最后拿到视频的宽高、时长等信息,用了插件完全不需要了
function drawVideoImage() {
var videoUrl = window.URL.createObjectURL(file);
var video = document.createElement('video');
video.src = videoUrl;
// 让视频自动播放来来获取宽高和缩略图
video.autoplay = true;
video.muted = true;
$('#createDynamicMadal .video').html('');
$('#createDynamicMadal .video').append(video);
// 当video加载完成时获取的
$('#createDynamicMadal .video video')[0].onloadedmetadata = function () {
videoHeight = $(this).height();
videoWidth = $(this).width();
}
$('#createDynamicMadal .video video')[0].play();
var index = 0;
$('#createDynamicMadal .video video')[0].ontimeupdate = function () {
var time = Math.floor(this.duration);
var canvas = document.createElement('canvas');
canvas.width = videoWidth;
canvas.height = videoHeight;
var context = canvas.getContext('2d');
context.fillStyle = '#000';
context.drawImage(this, 0, 0, canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
var src = canvas.toDataURL('image/jpeg');
// 将视频的缩略图渲染到页面中
if (src != 'data:,') {
var dynamicImg = new Image();
dynamicImg.src = src;
$(dynamicImg).attr('index-video', '1');
// 将压缩的后的图片渲染到页面中
$('.upload-video').before(`<div class="upload-item upload-items upload-video-img" style="display:inline-block;margin-right:5px;"><img src="${src}" index-video='2'><i class="iconfont icon-guanbishixin delete-img"></i><div class="edit_cover">编辑封面</div></div>`)
thumbnailImg = dataURLtoFile(src, 'thumbnailImg.jpeg');
duration = time;
this.ontimeupdate = null;
$('#file-upload').val('');
// 隐藏选择视频框
$('.upload-video').hide();
$('#loading').hide();
$('#loading .loading-item .loading-text').text('');
// 清空创造的video标签,避免造成性能浪费以及报错
$('#createDynamicMadal .video').html('');
// 加载完成后销毁url,节省性能
window.URL.revokeObjectURL(videoUrl);
}
}
}
标签:编码,canvas,h.264,const,视频,JavaScript,mediainfo,video,var 来源: https://www.cnblogs.com/jskinoa/p/jskinoaa.html