chimeejs / chimee Goto Github PK

目前chimee内部对于width与height的设置并未直接作用于video标签或者warpper上，这样会导致一类问问题，比如如下场景

<template>
<div class="chimee-player" ref="player"></div>
</template>

<script>
import Chimee from 'chimee';
import flv from 'chimee-kernel-flv';
import hls from 'chimee-kernel-hls';

export default {
    props: {
        width: {
            type: Number,
            default: 800
        },
        height: {
            type: Number,
            default: 450
        }
    },
    data() {
        return {
            player: null
        };
    },
    mounted() {
        this.player = new Chimee({
            width: this.width,
            height: this.height,
            wrapper: this.$refs.player,
            src: 'http://flv-live.jia.360.cn/live_jia_public/_LC_RE_non_3605172938515097363411231238_CX.flv',
            controls: true,
            autoplay: true,
            kernels: {
                flv,
                hls
            }
        });
        this.player.on('play', () => console.log('play!!'));
    }
};
</script>

<style lang="stylus" scoped>
div
    width 100%
    height 100%
    color #ff9000
</style>
<style lang="stylus">
.chimee-player video
    width: 100%
    height: 100%
</style>

目前的width height设置无效的情况下，只能通过非scoped的style样式来解决，因为vue-loader中对于scoped css的处理是对template内或者render函数最后编译成的的virtual dom做遍历生成scoped attr，而在类似上面代码中的应用，因video是动态生成的，scoped css无法应用到video上，所以只能暂时性hack方式来保证样式准确性。

且开发者看文档中会觉得width/height在当前状况下指的就是播放器本身的大小，希望这块能够支持一下~~~ 谢谢~

same to title.

目前flv延时最低在2-3秒 hls 5秒以上，能否通过webrtc等技术做到延时低于1秒。

目前，底层参数是在chimee的配置中传入进来的，目前hls、flv、mp4底层所用到的参数都是从这个配置中取的，mp4 只有点播，flv 有直播有点播，hls使用开源项目。
hls 参数有非常多，参见 hls api
flv目前需要这些参数
isLive: false, // 是否是直播
seekInKeyframe: true, // 总是seek 到关键帧
alwaysSeekKeyframe: true, // 总是seek 到关键帧
lazyLoadMaxDuration: 2 * 60, // 懒加载 最大播放长度
lazyLoadRecoverDuration: 30, // 懒加载还有多少长度 重启加载功能
lockInternalProperty: false, // 锁定原生的选项
webWorker: false, // 是否开启webworker
autoCleanupSourceBuffer: true, // 是否自动清除 sourcebuffer
autoCleanupMaxBackwardDuration: 30, // 清除sourcebuffer最大时间
autoCleanupMinBackwardDuration: 30, // 清除sourcebuffer最小时间
stashSize: 1024 * 384, // io缓存大小 直播下建议设置成 1024 * 128
seekType: 'range' // seek请求的方式 是range 还是 query
mp4暂时和flv 的差不多 因为都是我实现的，但是以后可能会有不同的差异,因为mp4没有直播。
目前底层需要改动一个参数，需要上层改动代码，而不是透传进来。
是否可以改成
kernels: { flv: { kernel： flv, config: confg } }
目前公用的参数比较少，欢迎讨论一下

ios 微信中， 可能需要监听 WeixinJSBridgeReady 事件， 来回调一些， load／ play 事件。

目前在遇到的情况是， 微信中， 默认不会触发 loadstart 事件，此时需要手动触发 player.load 方法。

现在是否支持rtmp协议的解析？想播放rtmp协议开头的视频文件，有例子吗？

1. 目前 chimee 没有暴露， touch 类的相关类的移动端事件。

2. 目前移动端， 手势比较多， 播放器，常用的三个手势，点击／拖动／滑动， 这几个手势封装在 chimee 比较好， 还是，插件自己去封装比较好？？？
   我个人比较赞成封装在插件内。原因是，大部分插件的手势其实都是点击操作，只有少部分， 像 controlbar 才会有这几种手势的应用。 后期手势的扩展也是， 插件自己扩展就好了， 不然， chimee 的代码也是越来越多。

flv地址：http://1253804432.vod2.myqcloud.com/3712977fvodgzp1253804432/f3f31e5f9031868223411915443/f0.flv

vlc播放成功、腾讯tcplayer也能播放。

使用chimee播放报错。

Failed to load http://1253804432.vod2.myqcloud.com/3712977fvodgzp1253804432/f3f31e5f9031868223411915443/f0.flv: Response for preflight has invalid HTTP status code 400

麻烦团队大牛帮我看一下，是解码器的问题吗？

先占个位置，回头补充一下详细demo示例

If you find document hard to read or you have some advice, you can tell me here.

相关变量：videoEventHandlerList videoDomEventHandlerList，只有push没有pull，但解绑时索引每次都是从0开始。

所以多切几次流让 videoElement销毁创建多次 ，HandlerList就会一直push，导致最后销毁播放器实例时候解绑失败，会报告事件异常。

相关代码：

https://github.com/Chimeejs/chimee/blob/master/src/dispatcher/dom.js#L143

https://github.com/Chimeejs/chimee/blob/master/src/dispatcher/dom.js#L148

https://github.com/Chimeejs/chimee/blob/master/src/dispatcher/dom.js#L158

https://github.com/Chimeejs/chimee/blob/master/src/dispatcher/dom.js#L161

模拟了一下“slow 3G”网络，发现一次切换清晰度操作有createElement('video')多次，需要排查失败重试逻辑是不是有没走到destroy的情况。

现阶段判断 box， kernels 的职责其实一直都是 kernels 层负责。

是否有必要提升到 chimee 层做统一负责？、

@huzunjie @332065255 @songguangyu @yandeqiang

when error occured, this player crashed and never roll back again

cc @solocao @zhangyf92

现在背景只能用css填充，是否可以增加一个背景图片的参数? 这个是统一在接口上处理，还是交由用户自己处理？

第一次热切换 video 属性复制会默认<video poster ...>，这时再切流复制video属性会读到poster为空字符串，设置给新的videoElement后浏览器将空字串会解析为当前页URL

复现场景：http://chimee.org/demo/live-clarity.html

系统环境： MAC Chrome 62.0.3202.94

相关代码：

需要增加判断，避免默认值为空时被置为空字串-从而导致浏览器解析为当前页URL。

目前采用在controls增加清晰度切换图标，点击时手动destroy player来切换清晰度，在destroy的时候，chimee会报『Cannot read property 'triggerSync' of undefined』，如图所示

silentload 或者 load 的时候改变的如 isLive 等配置没有存到 videoconfig 中。因为没留意到其他插件也关注这个。

@yandeqiang 需要一个绑定了 islive 的插件我调试一下。

另外这个 islive 切换你有感知吗？

目前isLive的的选项除了在controller-plugin中看到使用外，地方并无看到使用，而且此处又与plugin中细粒度控制图标展示与否冲突，有一定的歧义性，希望对于此参数做进一步考虑

代码大概如下：

this.player = new Chimee({
    width: this.width,
    height: this.height,
    wrapper: this.$refs.player,
    isLive: this.isLive,
    autoplay: true,
    controls: true
});

此时只是想初始化播放器，后续通过load方法载入视频，但是目前会直接报video player is not already, must init player

debug了一下代码发现在播放器初始化的时候会自动去加载src内容，此时src为空，走入后面逻辑

silentLoad 方法在 immediate 时 没有把 kernel destory。 有可能导致内存泄露。

文档
preload 属性可选值／默认值错误
video 属性 mdn
可选值， none/ metadata/auto
默认值不同浏览器不同定义

chimee 的兼容性支持到 ie 多少？
透明插件使用的 pointer-events 兼容性到 ie 11。

chimee/src/vessel/vessel.js
line 4: // base css controller for cotainer and wrapper

复现地址

问题如下：

(1) 切换时报错

(2) preset 可能为空

chimee.min.js error bug

seems because of lacking of runtimehelper

log: {
error: false,
info: false,
warn: false,
debug: false,
verbose: false,
}
配置了 log 但是在flv里 Log.verbose 等 依然会打印出来
Log 继承的是 chimee-helper-log

@huzunjie @332065255 @songguangyu

观察到 kernel 里的 isSupport 是指该 kernel 是否运行。 Chimee 层的 isSupport 各位是期望遍历所有安装的 kernel 是否运行吗？ 感觉有点怪。

上面是chrome的log是否要做一下判断，移动端才监听这些事件？

在qq浏览器/微信 播放不了

关联 issue

Fullsceeen API is only supported by IE11 and beyond.
But we mark the whole chimee player to IE9.
So should we support fullscreen on IE9? And how?

@yandeqiang offer me code below

if(window.ActiveXObject) {
  const wscript = new window.ActiveXObject('WScript.Shell');
  if(wscript !== null) {
      wscript.SendKeys('{F11}');
  }
}

It's simulate people tapping on F11. And we can exit fullscreen mode in the same way.

But we can't know whether the page is fullscreen or not, and this will fullscreen the all page.

So I think we should take a look at the project jquery.fullscreen. It has a fall back on IE7-IE10.

It seems that they polyfill by css.

暴露 kernel 层的 reloadTime 设置

这个苹果产品的自动播放问题，貌似还是黑洞？？？这个产品能解决吗？

事件方法参见链接
https://github.com/Chimeejs/chimee-kernel

要做多窗口直播，但是发现对不同id的div元素初始化chimee实例，只有一个能播放，其他的就停下来了。在点播视频，我开了两个，两个都是正常播放。是不是目前不支持多开直播？或者是多开直播占用了同一个缓冲区，导致了冲突？

画质切换是可以自己扩展插件的吗

0.50以后可以对player.container进行设置 ，
比如我设置player.container.width=640px
player.container.height=360px

当我点击全屏按钮后，浏览器进入全屏状态 container的区域还是640x360大小，没有铺满
chimee 是否应该自动接管这里，让container真正全屏，

全屏使用
方法 $fullscreen
全屏的对象，可选video、container和wrapper
默认：container

按照一般的理解既然传入了区域，那么这个区域大小就得跟全屏的大小一样才对

提供文档或者提供功能。

在调用load时候 无法立刻触发loading 状态，chimee时候增加这一层的处理。

将 #1 放于此处讨论。

微信端可以利用 jssdk 进行包裹达到自动播放的目的。鉴于微信体量巨大，场景较大。chimee 应该针对性进行支持。

• play 支持微信检测并调用微信方法进行包裹
• load 检测 autoplay 属性及环境问题，自动调用 play

预加载方案构思

• 多个视频之间的预加载
  做法：增加一个隐藏 video 加载流，需要的时候直接切换即可。

• cacheStorage 配合 PWA 完成
  做法，利用 cacheStorage 存储片段，拦截请求返回。注意判断 storage 的限制

• localStorage 或 indexedDB 读取
  这个可能要修改一下各个 kernel 的设置，另外限制比较大。和光宇衡量。

当使用直接播放器实例load其他直播流的时候一直不成功，所以参考官网每次rebuild的方式，发现destroy的时候走到chimee-kernel-flv内部时this.transmuxer对象不存在，于是destroy失败，关于前面的load不成功的原因我有空再排查一下看看是否需要提issue

测试地址：http://chimee.org/demo/live-clarity.html

动态切流之后，再重建播放器，稳定复现 installVideo 中__dispatcher.bus undefined 异常。

相关代码：

I wonder if how-to-write-an-ad-plugin.md is ready?

In current time, we use preset to install the other kernel like chimee-kernel-flv.Which is blur and confused.

So we decide to change it into kernels. Which it's easy to read.

While we will support install kernel later, this make kernel installing clearly.

如题

• $watch
  finished in 0.1.3
• width and height of video should support percentage (support in 0.2.0
• add isFullScreen on video to tell plugin the fullscreen state, or make fullscreen pass by event (support in 0.2.0)
• support offsetHeight, offsetWidth etc (support in 0.2.0)
• support error on video (support in 0.2.0)
• support silent load (support in 0.2.0)
  Developer may want to support multi-clarity. If they change clarity by loading a new src. That is slow. So it may be a good idea to support silent load and change the video when loading is finished.
• load new src including box change (support in 0.2.0)
  As in silent load we can change box and kernel, we can also support change box on load too
• custom kernel (support in 0.2.0)
  user can choose the kernel. In that way, we can reduce our code size.
• add some css guide on document and think about what should we do on css
• throw plugin name
• fix plugins and plugin error on document or support both
• fix fullscreen on IE9-IE10 (fixed in 0.2.8)
• add fullscreen event on chimee (fixed in 0.2.8)
• fix load empty bug on non-autoload mode (fixed in 0.2.8)
• silentload events
• support static preset install (will be landed on 0.4.0)
• add autoload tips on demo
  when people haven't pass src but mark with autoload, we should offer a tips
• use babel-env to build
• english document and guidance
• environment test
  offer a method like isSupport to let user know whether the kernel is supported in this environment.
• check preset and kernels on chimee layer
  mostly check with box setting, but this is basically job of kernel

----- discussion

• weex
• chimee with pwa
• debug mode and code minify
• 小程序
  support better debug experience and minify debug code

muted defaultMuted same

需求汇总

需求确定后在此更新 ROADMAP 用于同步信息。

• 利用微信 jssdk 兼容移动端直播的场景。
• 微信小程序内使用调研:
  微信小程序环境通过 video、live-player 组件提供了视频播放功能，基于 cover-view 可以实现UI自定义；配合微信开放的自定义组件方案，可以开发相应独立组件；官方说小程序中Video是基于Native实现的，通过文档没找到扩展解码能力的方法。