浏览器视频有音频无视频

只年

已于 2024-06-23 23:12:51 修改

阅读量775

点赞数 7

分类专栏：线上问题文章标签：音视频 javascript

于 2024-06-23 23:12:28 首次发布

只年

本文链接：https://blog.csdn.net/qq_41594280/article/details/139908238

版权

线上问题专栏收录该内容

2 篇文章 0 订阅

订阅专栏

有些浏览器不支持某些视频的编码方式导致播放出现问题，这个时候要限制视频上传

	AVC(H264)	HEVC(H265)	MPEGS(divx)	MPEG4(Xvid)
Chrome	正常播放	无封面，正常播放	有音频，无视频	有音频，无视频
FireFox	正常播放	无封面，有音频，无视频	有音频，无视频	有音频，无视频
IE	正常播放	不能播放	不能播放	不能播放
Edge	正常播放	正常播放	正常播放	正常播放

插件

https://unpkg.com/mediainfo.js@0.1.4/dist/mediainfo.min.js

代码示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div>
    <input type="file" id="inputFile" accept="video/*">
</div>
<script type="text/javascript" src="https://unpkg.com/mediainfo.js@0.1.4/dist/mediainfo.min.js"></script>
<script>
    //主要时获取视频编码，有些浏览器不支持某些视频编码
    function getFileEncodeInfo(file) {
        return new Promise((fileEncodeResolve, fileEncodeReject) => {
            //format结果值的格式（选择：object，JSON，XML，HTML或text）
            MediaInfo({ format: 'object' }, (mediainfo) => {
                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) => {
                    fileEncodeResolve({
                        encodeFormat:result.media.track[1].Format,
                        result
                    });
                }).catch((error) => {
                    fileEncodeReject(error);
                })
            })
        })
    }
 
    document.getElementById('inputFile').addEventListener('change', async (e) => {
        const file = e.target.files[0]
        try {
            const fileEncodeInfo = await getFileEncodeInfo(file);
            //AVC各大浏览器都支持
            if(fileEncodeInfo.encodeFormat!=='AVC'){
                console.log('目前支持AVC(h264)视频编码格式')
            }else{
                console.log('视频编码格式正常')
            }
        }catch (error) {
            console.log('获取视频编码信息失败：',error)
        }
    })
</script>
</body>
</html>

可使用视频转码工具转为H264格式: https://www.bilibili.com/read/cv16842193/

只年

关注

7
点赞
踩
12

收藏

觉得还不错? 一键收藏
打赏
0
评论
浏览器视频有音频无视频

/format结果值的格式（选择：object，JSON，XML，HTML或text）有些浏览器不支持某些视频的编码方式导致播放出现问题，这个时候要限制视频上传。//主要时获取视频编码，有些浏览器不支持某些视频编码。'目前支持AVC(h264)视频编码格式'//AVC各大浏览器都支持。'获取视频编码信息失败：''视频编码格式正常'
复制链接

扫一扫