首页 > 其他分享 >前端判断视频格式(H264、H265,解决谷歌chrome浏览器无法播放mp4问题)

前端判断视频格式(H264、H265,解决谷歌chrome浏览器无法播放mp4问题)

时间:2023-10-09 11:38:23浏览次数:67  
标签:H264 H265 chrome mp4 var 格式

chrome浏览器对某些mp4文件不支持,播放时只有声音没有画面。

这种情况一般是因为视频文件为H265编码,而chrome浏览器只支持H264编码的文件(谷歌没买H265的使用专利)。

 

解决方法一:

使用软件(格式工厂或命令行库ffmpeg)对文件进行转换,将H265转换成H264。

格式工厂:

 

ffmpeg:

ffmpeg -i input.mp4 -vcodec h264 output.mp4

 

 

解决方法二:

为了程序的便捷性,可实现接收文件上传后实现自动化文件编码格式判断和新格式转换。

web端上传 + 后端执行转换 的模式可使用以下方法处理视频:

前端使用 mediainfo.js 或 mp4box.js 库进行格式判断。

由于在mp4box.js中,如果一个MP4视频文件的编码格式为H.264,则其Codec是会包括avc这个字符串的,因此我们可以通过判断Codec中是否包含"avc"从而进行H.264视频编码格式的判断 

 代码:

var input  = document.getElementById("file"); // 获取上传的文件
input.onchange = function() {
  var file = this.files[0];
  var mp4boxfile = MP4Box.createFile();
  var is_transcode = 0;
  mp4boxFile.onReady = function(info){
    let mime = info.mime
    let codec = mime.match(/codecs="(\S*),/)[1]
    if (codec.indexOf('avc') === -1) {
      is_transcode = 1;  // 需要转码
    }
    // 进行文件上传操作
    ...
  }
  if(file){
    // 读取mp4的buffer
    var reader = new FileReader();
    var buffer = reader.readAsArrayBuffer(file);
    reader.onload = function(e) {
      var arrayBuffer = e.target.result
      arrayBuffer.fileStart = 0
      mp4boxFile.appendBuffer(arrayBuffer)
    }
  }
}

前端判断后,提交给后端此视频的格式,后端再决定是否调用程序转换视频,转换视频可使用ffmpeg库。

 

参考文献:https://www.cnblogs.com/Yellow-ice/p/13743400.html

标签:H264,H265,chrome,mp4,var,格式
From: https://www.cnblogs.com/jsper/p/17751259.html

相关文章

  • chrome浏览器显示网页字体不正常,需要放大150% 显示正常
    软件环境:windows764位、chrome109.0.5414.120。故障现象:chrome浏览器,浏览百度、淘宝等网站总是需要把显示分辩率放大150%,然后显示正常。解决方案:下载windows7 kb2670838补丁安装后,重启电脑,打开chrome浏览器浏览网页显示正常。 ......
  • chrome调试工具之[hover悬浮样式]
    前言在调节带有hover样式的元素时,当鼠标移动到上面的时候才会显示相应的元素,鼠标移开时元素就会消失,所以导致无法调节样式问题,第一种方式方便定位元素位置,第二种方式可以解决问题(可以直接看第二种方法!!!)一、快捷定位元素位置的方法使用网上的方法,首先F12打开调试工具,找到加了h......
  • FreeSWITCH添加h264编码及pcap视频提取
    操作系统:CentOS7.6_x64、Windows10_x64FreeSWITCH版本:1.10.9Python版本:3.9.2一、启用h264相关模块这里以mod_openh264为例进行演示。1、安装open_h264库获取open_h264源码:gitclonehttps://github.com/cisco/openh264.git若下载过慢,可从如下渠道获取:关注微信......
  • 支持复制粘贴进行翻译的chrome浏览器插件
    下载安装https://chrome.google.com/webstore/detail/translator-dictionary-acc/bebmphofpgkhclocdbgomhnjcpelbenh/related?hl=zh-CN界面设置常用语言历史记录......
  • chrome浏览器网页截图时图片“泛白”“过曝”的解决办法
    原因分析表象原因为系统显示设置里开启了HDR,所以理论上只要关闭HDR就可以解决,但是这种牺牲体验换来的解决办法总会让人纠结。HDR设置直接原因是chrome会默认匹配系统的颜色管理,但是由于截图瞬间颜色管理出错,所以出现了颜色显示不对。解决办法在chrome地址栏输入chr......
  • Go每日一库之178:chromedp(一个基于Chrome DevTools协议的库,支持数据采集、截取网页长
    该库提供了一种简单、高效、可靠的方式来控制Chrome浏览器进行自动化测试和爬取数据。项目地址:https://github.com/chromedp/chromedp它可以模拟用户在浏览器中执行各种操作,如点击、输入文本、截取网页长图、将网页内容转换成pdf文档、下载图片等,从而获取到需要采集的数据。基......
  • Chrome浏览器下载文件被自动拦截怎么办
    谷歌浏览器下载文件被自动拦截怎么办?在使用谷歌浏览器进行网络文件下载的时候,下载的文件进程被浏览器给阻止了,导致无法获取文件下载资源了。如何解除这个拦截功能呢?来看看解决方法分享吧!操作教学1、首先打开谷歌浏览器,在谷歌浏览器右上角可以看到一个由三个点组成的图标,点击该图......
  • Chrome插件manifest.json文件详解
    {//扩展名称"name":"MyExtension",//版本。由1到4个整数构成。多个整数间用"."隔开"version":"1.0",//manifest文件版本号。Chrome18开始必须为2"manifest_version":2,//描述。132个字符以内"......
  • vscode运行html文件,显示"windows找不到'chrome'文件"
     运行html文件时,弹窗报错。大部分原因是因为chrome浏览器位置不对。这时,我们只要在vscode中修改chrome路径就可以解决:1、首先我们右击chrome浏览器找到属性,并且复制目标路径 2、打开vscode,在设置中找到Liveserver,打开setting.json文件,添加上chrome文件即可(将路径中的\改......
  • 解决:npm ERR! [email protected] install: `node install.js`
    https://cdn.npmmirror.com/binaries/chromedriver/2.27/chromedriver_win32.zip可以点击这个链接直接下载。删掉项目中的node_modules文件夹。根据自己的下载地址,安装依赖。npminstallchromedriver--chromedriver_filepath=文件地址注意:不需要解压缩。npminstall......