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

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

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

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

目前发现jsmpeg的不足

  1. 无法播放声音,只能播放视频。
  2. 在苹果和性能低的安卓中卡顿严重(iPhone7有略微卡顿,部分2016年安卓旗舰机不卡,现在终于相信有安卓能秒苹果了)

解决不足

  1. audio播放
  2. 无法解决,我本来想自己开启webgl,结果看到jsmpeg就是用的webgl,就是说他自己已经解决过了的

视频源

直播流

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

视频文件

jsmpeg只支持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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯Bugly的专栏

【MIG专项测试组】如何量化Android应用的“卡”?---流畅度原理&定义篇

腾讯Bugly特邀鹅厂MIG专项测试组,陆续为大家分享移动应用质量的有效评估方法。 MIG专项测试组 ? 致力于为腾讯移动互联网事业群(MIG)提供专项评测及...

59050
来自专栏腾讯社交用户体验设计

见微知著,谈移动缺省页设计 - 腾讯ISUX

27830
来自专栏守候书阁

个人建议-怎样写出一篇好文章

写文章有几个月了,之前跟几个作者交流写作的方式,有几个作者说自己不知道怎样写好文章,有两个还说,自己写的文章,即使是自己读也是感觉不通顺,但是不知道怎么改!见这...

8810
来自专栏知晓程序

鹅厂美女工程师来告诉你,小程序码是如何「绽放」的 | 晓组织 #20

腾讯 CDC 全称为「用户研究与体验设计中心」,是腾讯公司级设计团队,致力于提升腾讯产品的用户体验,探索互联网生态体验创新。

16420
来自专栏阮一峰的网络日志

Google日历简易版 2.0

长假期间,我写了一个小程序,现在正式发布。 大家用不用Google日历? ? 它可以用来规划日程、记录事项、甚至写日记,既安全(数据保存在Google的机房)又...

46380
来自专栏非著名程序员

前端必知的两个开源框架

虽然说框架的更新速度「日新月异」,此起彼伏,如「雨后春笋般」的出现,可以说是多的「琳琅满目」,「数不胜数」,让我们程序员「眼花缭乱」。

14240
来自专栏程序你好

Android 9 Pie新版本入门

Android 9的昵称是“Pie”。这并不是最受欢迎的Android名称,但它最后将会变成一个最受欢迎的名称。说到底,真正重要的是“Pie”的新功能——而且有...

13930
来自专栏hrscy

初识 Unity3D

早些年,游戏引擎市场的变化是非常大的,其中有一些比较出色的软件。比如 unreal,但是 unreal 走的商业模式针对的是大型的游戏公司,大公司通过购买序列号...

19830
来自专栏大前端开发

《大前端开发》培训2周小结

经过两周的培训,以及大家的努力,每个人的成长都非常的快。零基础的同学也已开始对HTML、CSS以及JavaScript有了比较形象的认识,开始建立起了编程思维,...

10920
来自专栏PPV课数据科学社区

【学习】教程:产品运营分析之Excel实用入门

为什么写Excel,因为昨天给实习产品经理布置了一道题目,对20多万条搜索关键词进行文本分析,半天时间,两位新同学分析完毕,晚上23点给我发的邮件。我也对这20...

39260

扫码关注云+社区

领取腾讯云代金券