在手机web中播放视频(使用js,不使用video标签,支持直播)

主要原理是使用 jsmpeg(Github链接)

jsmpeg是js中解析mpeg视频,并把内容画在画布上。

这篇文章是记录jsmpeg怎么用的。

目前发现jsmpeg的不足

  1. 无法播放声音,只能播放视频。(2018年更新,官方已解决该问题)
  2. 在苹果和性能低的安卓中卡顿严重(iPhone7有略微卡顿,部分2016年安卓旗舰机不卡,现在终于相信有安卓能秒苹果了)
  3. 目前(2018年)版本使用ts格式的视频,相同质量的视频大小差不多是mp4的两倍,太占流量了
  4. 缺少许多事件

解决不足

  1. audio播放
  2. 无法解决,我本来想自己开启webgl,结果看到jsmpeg就是用的webgl,就是说他自己已经解决过了的。随着大家手机的升级,已经不卡了
  3. 也无法解决,只能在体积和可操作性上做取舍了
  4. 我自己增加了几个事件:https://gitee.com/haua/jsmpeg...

视频源

直播流

jsmpeg支持直播流,但是我还没研究,所以只是先提一下,先不深入。

视频文件

jsmpeg只支持mpeg格式的视频(目前2018版本支持ts视频格式,似乎是不支持mpeg了?),jsmpeg官方建议用ffmpeg来转格式。ffmpeg下载地址

  1. 从把视频转成mpg格式(转出的视频无音频,且应该是支持从许多种格式转过来的,我暂时只试过从mp4转)
    ./ffmpeg -i video.mp4 -f mpeg1video -vf "crop=iw-mod(iw,2):ih-mod(ih,2)" -b 0 video.mpg
  2. 从视频中提取音频(上面说过jsmpeg不能播声音,所以声音要单独弄出来)
    ./ffmpeg -i video.mp4 -f mp3 -vn video.mp3

ffmpeg用法记录
Print help / information / capabilities:
-L show license
-h topic show help
-? topic show help
-help topic show help
--help topic show help
-version show version
-buildconf show build configuration
-formats show available formats
-devices show available devices
-codecs show available codecs
-decoders show available decoders
-encoders show available encoders
-bsfs show available bit stream filters
-protocols show available protocols
-filters show available filters
-pix_fmts show available pixel formats
-layouts show standard channel layouts
-sample_fmts show available audio sample formats
-colors show available color names
-sources device list sources of the input device
-sinks device list sinks of the output device
-hwaccels show available HW acceleration methods

Global options (affect whole program instead of just one file:
-loglevel loglevel set logging level
-v loglevel set logging level
-report generate a report
-max_alloc bytes set maximum size of a single allocated block
-y overwrite output files
-n never overwrite output files
-ignore_unknown Ignore unknown stream types
-stats print progress report during encoding
-max_error_rate ratio of errors (0.0: no errors, 1.0: 100% error maximum error rate
-bits_per_raw_sample number set the number of bits per raw sample
-vol volume change audio volume (256=normal)

Per-file main options:
-f fmt force format
-c codec codec name
-codec codec codec name
-pre preset preset name
-map_metadata outfile[,metadata]:infile[,metadata] set metadata information of outfile from infile
-t duration record or transcode "duration" seconds of audio/video
-to time_stop record or transcode stop time
-fs limit_size set the limit file size in bytes
-ss time_off set the start time offset
-sseof time_off set the start time offset relative to EOF
-seek_timestamp enable/disable seeking by timestamp with -ss
-timestamp time set the recording timestamp ('now' to set the current time)
-metadata string=string add metadata
-program title=string:st=number... add program with specified streams
-target type specify target file type ("vcd", "svcd", "dvd", "dv" or "dv50" with optional prefixes "pal-", "ntsc-" or "film-")
-apad audio pad
-frames number set the number of frames to output
-filter filter_graph set stream filtergraph
-filter_script filename read stream filtergraph description from a file
-reinit_filter reinit filtergraph on input parameter changes
-discard discard
-disposition disposition

Video options:
-vframes number set the number of video frames to output
-r rate set frame rate (Hz value, fraction or abbreviation)
-s size set frame size (WxH or abbreviation)
-aspect aspect set aspect ratio (4:3, 16:9 or 1.3333, 1.7777)
-bits_per_raw_sample number set the number of bits per raw sample
-vn disable video
-vcodec codec force video codec ('copy' to copy stream)
-timecode hh:mm:ss[:;.]ff set initial TimeCode value.
-pass n select the pass number (1 to 3)
-vf filter_graph set video filters
-ab bitrate audio bitrate (please use -b:a)
-b bitrate video bitrate (please use -b:v)
-dn disable data

Audio options:
-aframes number set the number of audio frames to output
-aq quality set audio quality (codec-specific)
-ar rate set audio sampling rate (in Hz)
-ac channels set number of audio channels
-an disable audio
-acodec codec force audio codec ('copy' to copy stream)
-vol volume change audio volume (256=normal)
-af filter_graph set audio filters

Subtitle options:
-s size set frame size (WxH or abbreviation)
-sn disable subtitle
-scodec codec force subtitle codec ('copy' to copy stream)
-stag fourcc/tag force subtitle tag/fourcc
-fix_sub_duration fix subtitles duration
-canvas_size size set canvas size (WxH or abbreviation)
-spre preset set the subtitle options to the indicated preset


黒之染
几年半个人练习生,喜欢ctrl c、ctrl v、delete

两年半个人练习生,喜欢ctrl+c/ctrl+v/delete

3.1k 声望
46 粉丝
0 条评论
推荐阅读
jest如何执行单组测试用例
假如有这个文件tests/test.test.ts: {代码...} 我只想运行里面的t2,则可以这样: {代码...} 跨级别之间用空格分隔即可。相关文档:[链接]

黒之染2阅读 1.6k

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy49阅读 7.3k评论 12

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs42阅读 6.9k评论 12

封面图
「多图预警」完美实现一个@功能
一天产品大大向 boss 汇报完研发成果和产品业绩产出,若有所思的走出来,劲直向我走过来,嘴角微微上扬。产品大大:boss 对我们的研发成果挺满意的,balabala...(内心 OS:不听,讲重点)产品大大:咱们的客服 I...

wuwhs32阅读 3.5k评论 5

封面图
安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城29阅读 6.4k评论 5

封面图
2022大前端总结和2023就业分析
我在年前给掘金平台分享了《2022年热点技术盘点》的前端热点,算是系统性的梳理了一下我自己对前端一整年的总结。年后,在知乎上看到《前端的就业行情怎么样?》,下面都是各种唱衰前端的论调,什么裁员,外包化...

i5ting27阅读 2.3k评论 4

封面图
深入理解React Diff算法
fiber上的updateQueue经过React的一番计算之后,这个fiber已经有了新的状态,也就是state,对于类组件来说,state是在render函数里被使用的,既然已经得到了新的state,那么当务之急是执行一次render,得到持有新...

nero31阅读 11.8k评论 3

两年半个人练习生,喜欢ctrl+c/ctrl+v/delete

3.1k 声望
46 粉丝
宣传栏