专栏首页黒之染开发日记在手机web中播放视频(使用js,不使用video标签,支持直播)

在手机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 条评论
登录 后参与评论

相关文章

  • win10x64安装nodejieba

    要先全局安装windows-build-tools,注意以下命令不能省略--include-arm64-tools选项 ,否则x64的系统也只能安装x86的no...

    黒之染
  • mysql记录

    黒之染
  • 百度地图js极速版api遇到的bug

    1、用于放置百度地图的div,不能有任何一个父级元素设置 position:fixed,否则会报错:Uncaught TypeError: Cannot rea...

    黒之染
  • Hive的常用优化

    数据量大尽量避免使用 count(distinct) ,这会导致所有数据在一个 reduce 内去重,导致运行缓慢,使用 group by 来代替

    kk大数据
  • Google的大规模集群管理系统Borg(上篇)

    摘要:Google的Borg系统是一个运行着成千上万项作业的集群管理器,它同时管理着很多个应用集群,每个集群都有成千上万台机器,这些集群之上运行着Google的...

    CSDN技术头条
  • 一个诡异的zabbix报错no active checks on server

    我上去看了看确实没了,然后想起来当初装zabbix的时候非常的浪,mysql放在了默认的位置上。

    tristanwang
  • 一款AR游戏让残疾和健全儿童一起踢球,实现公平竞争!

    一款名叫iGYM的AR游戏系统,创建了一个具有真正包容性的环境,残疾儿童和健全儿童可以一起玩耍了!

    大数据文摘
  • Python3 离线安装第三方包

    py3study
  • Asp.Net MVC4入门指南(7):给电影表和模型添加新字段

    在本节中,您将使用Entity Framework Code First来实现模型类上的操作。从而使得这些操作和变更,可以应用到数据库中。 默认情况下,就像您在...

    葡萄城控件
  • 【实战案例】如何利用大数据思维在北京租到好房子?

    PPV课大数据 第一步:精准定位。 确定找房地点,精确到小区。每个小区在任意时间,至少有三五间空房待租。大的小区,有几十间。完全不要担心没房。如果没有,基本是因...

    小莹莹

扫码关注云+社区

领取腾讯云代金券