chimeejs / chimee-mobile-player Goto Github PK

是否支持ios?

当给chimee绑定的实例容器,的父盒子添加padding属性，使实例容器缩小时，点击播放进度条，调整播放进度时存在偏差，这个偏差值与父盒子添加的padding值有关联

播放过程中，跳转播放后，继续播放直到视频结束，进度条不会动。

另外，直接更改播放器的 src 地址和重新加载新的播放器时改变 src 地址，有什么区别？

gzip都有100多kb 比我整个项目gizp都大

由于是提前将播放源拿到，我跳转到视频播放页面，初始化video标签，发现立刻点击播放，加载源总是会很慢，但是如果等待1s再点击播放，这种方式便会很快播放，刚开始我以为是初始化的问题，但是实际测试不是。

现在在低版本浏览器中，全屏出现问题了
不确定引入 babel-polyfill是否可以解决问题，
看到文档有这句，但不清楚怎么引入，是webpack全局打包有引入就可以了吗？

如题： 文档中未找到在集成里面的相关说明

安卓移动端不能自动播放

问大佬几个问题，也是这个插件没有解决的。
1、在安卓浏览器中，系统自带浏览器、UC、QQ等浏览器都无法使用自定义的控制栏，video播放都会由浏览器接管，使用浏览器的播放器样式。请问这个问题有解吗？
2、为了去除播放按钮等除了通过改变video的影子dom样式，还有其他方法没，因为这个在安卓浏览器不生效。
3、看腾讯的视频js可以实现所有浏览器统一使用自定义样式，究竟是怎么做到的呢。莫不会是因为腾讯和浏览器厂商有合作吧。。
大佬可以指点一下吗，感激不尽～
腾讯demo链接：http://m.v.qq.com/tvp/a_double_video_one_page.html

npm i chimee-mobile-player
npm ERR! Error while executing:
npm ERR! /usr/bin/git ls-remote -h -t https://github.com/Chimeejs/chimee-plugin-mobile-controlbar.git
npm ERR!
npm ERR! fatal: unable to access 'https://github.com/Chimeejs/chimee-plugin-mobile-controlbar.git/': SSL connect error
npm ERR!
npm ERR! exited with error code: 128

npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2018-07-27T03_45_02_021Z-debug.log

如何使web端也可以播放/全屏?直接clone下的demo控制器是不起效果的

例如小米6，华为P9，点击一个按钮，将播放器的src变更后，不能播放，自动播放已开，调用play()方法也无效。播放器的遮罩层的播放按钮会显示，点击的话，在AndriodStudio中会报错（在Chrome上调试并不会，也能正常播放，一切都很祥和）：
01-17 16:38:23.490 31165-31165/cn.xxx.shapp I/chromium: [INFO:CONSOLE(4981)] "Uncaught (in promise) NotSupportedError: The element has no supported sources.", source: http://media.xxx.cn/live/lib/chimee/chimee-mobile-player.browser.js (4981)
希望你们能看到，谢谢。

import 'lib/chimee-mobile-player.browser.css';
import ChimeeMobilePlayer from 'chimee-mobile-player';

编译报错：
This dependency was not found:

• lib/chimee-mobile-player.browser.css in ./src/pages/WatchBaby/index.tsx

To install it, you can run: npm install --save lib/chimee-mobile-player.browser.css

1. ios 点击之后报错
   Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
   导致无法正常播放
2. 在没有点击全屏的时候，手机横屏，显示是不太对的

请作者帮忙解决下！十分感谢

Q: 使用cordova将chimee打包进APP后，在播放调用的时，ios全屏状态下无法屏蔽原生控件

UA信息：Mozilla/5.0 (iPhone; CPU iPhone OS 11_1_1 like Mac OS X) AppleWebKit/604.3.5 (KHTML, like Gecko) Mobile/15B150 (4306536368)

配置项：

{
    wrapper: "#wrap-video", 
    src: url,
    autoplay: false,
    controls: true,
    playsInline: true,
    preload: true,
    x5VideoPlayerFullscreen: false,
    x5VideoOrientation: "landscape",
    xWebkitAirplay: true,
    muted: false
}

展示效果：

如下图，全屏模式下只能这样显示，我应该怎么设置才能让它变成横屏模式

我的配置如下图

做的是直播。直接复制的demo代码。流地址
http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8
真机上测试播放没问题。但是pc端，chrome 模拟手机会出现这个错误。
Uncaught (in promise) DOMException: The element has no supported sources.

1. 那么问题来了，我该怎么在本地调试.....
2. 看文档监听事件的部分，似乎都是‘’ video 上的 dom 事件，如 click ，target 为 'video-dom'‘’，这样的点击事件。 以这个报错为例，请问如何去监听播放成功或者播放失败事件？
   谢谢大佬

当用户不想使用默认插件的时候，现在暂时没有选项可以这么做。

虽然目前仅仅引入了两个插件，但是还是建议增加该项功能完成闭环。

实际使用中发现魅族、小米自带浏览器会强制全屏播放，设置了相关属性也没有用。我知道这不是这个组件的问题，想看看大家找到解决办法吗。。。

播放器初始化之后报这个错误：The error you provided does not contain a stack trace

另外，因为我们需求是动态视频地址列表，点击某个Item之后切换唯一的播放器地址，每次切换的时候都new Chimeeplayer，导致底部栏control会每切换一次就重叠一次；
因为之前试过了页面初始化的时候初始化一个player，然后动态切换src行不通。
试了destroy()事件也不行。

每次点击一个item都实例化一次下面这段代码：
const chimeePlayer = new ChimeeMobilePlayer({
wrapper: '#m3u8Player', // video dom容器
poster: poster,xxxxxx
// src: src,
src: 'https://server7.x'x'x'x'x'x.com/live/0018A975C642.m3u8',
isLive: true,
autoplay: isAutoplay,
controls: true,
playsInline: true,
preload: 'auto',
x5VideoPlayerFullscreen: true,
x5VideoOrientation: 'landscape|portrait',
xWebkitAirplay: true,
muted: true,
disableUA: [
'Mozilla/5.0 (Linux; Android 4.4.2; HM NOTE 1TD Build/KOT49H; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/62.0.3202.97 Mobile Safari/537.36',
],
//removeInnerPlugins: ['chimeeMobiControlbar', 'chimeeState'], // 需要移除的插件
});

在微信浏览器中，试了小米 MIX2s ， 乐视Pro3 都不行， 所有的安卓手机，视频都被置顶

RT，video DOM 始终处于最高级，z-index 不起作用，导致自定义的其他 DOM 元素被遮挡，有什么办法呢？已经设置了 playsInline: true 还是不行 ...

你好，在移动端使用版本为 v0.2.1 的 chimee-mobile-player.browser，但是将资源为 m3u8 的实例配置了 isLive: true 后，播放时，控制条是这样的：

请问这里怎么设置才好？

如题，顺便说一下，需要自定义事件是因为在手机web页面点击全屏播放后，视频不会自动横屏，还是小小的，只是上下黑背景填充了屏幕，播放画面还是在中间。所以打算点击全屏切换按钮，做一些别的操作。
望速速指教，多谢多谢！

oPlayer.addEventListener('canplay', function () {
console.log('can');
oVideoObj.videoErrImg.style.display = 'none';
});
没有效果；

含义：绑定事件监听
别名：addEventListener
参数：
key
类型：string
含义：事件名称
fn
类型：Function
含义：处理函数
利用 on 可以直接监听任何发生在 video 上的事件。

但是 video 只是 chimee 上的一部分。chimes 分为 wrapper, container, video 三个层级。

如果要监听 wrapper 上的事件，请添加前缀 w_

如果要监听 container 上的事件，请添加前缀 c_

要理解 chimee 的事件体系，请阅读《为什么要将 Chimee 设计成一个组件化框架？》中的事件体系部分。

上面的链接已失效，并且给什么加前缀也不是很清楚。
chimee-mobile-player v0.2.1

设备:

• IPhone11 iOS13.2.3 Safari 不开启请求桌面网站
• IPad A1538 PadOS13.1.3 Safari 不开启请求桌面网站
• IPad A1566 PadOS13.1.3 Safari 不开启请求桌面网站
  问题:

在iOS13系统下播放控制条隐藏后需要点击2次才能显示,而在iOS13以下系统只需单击就能够显示控制条.

备注: pad横屏时是正常的

建议对于没有使用babel的项目引入chimee时不要直接引入<script src='./lib/chimee-mobile-player.browser.js'></script>

我在使用chimee-mobile-player时直接查看文档看到文档中安装部分说:
首先根据您的业务场景，你可以直接将lib目录下适合的打包文件引入您的业务代码中，比如直接使用<script src='./lib/chimee-mobile-player.browser.js'></script>引用JS。

一时懵逼就按照这样的方式引用了，后来发现在低版本的安卓手机上点击屏幕部分会报undefined is not a function 的错误，经过排查后发现是因为在chimee-mobile-player.browser.js的第12139行使用了数组的indexof方法判断当前点击元素是不是包含chimee-state-play这个节点，由于indexof是ES6语法，所以导致了上述错误。

另外针对两个元素的包含关系的判断建议使用node.contains()这个方法。

    var ChimeeMobilePlayer = new ChimeeMobilePlayer({
        wrapper: '#chimee-wrapper',  // video dom容器
        src: 'test.mp4',
        // autoplay: true,
        controls: true,
        playsInline: true,
        preload: 'auto',
        x5VideoPlayerFullscreen: true,
        x5VideoOrientation: 'landscape|portrait',
        xWebkitAirplay: true,
        muted: false,
      // removeInnerPlugins: ['chimeeMobiControlbar', 'chimeeState'] // 需要移除的插件
    });
    ChimeeMobilePlayer.on('fullscreenchange', evt => {
        console.log('wowo, fullscreen', evt);
    });

    /**
     * 点击事件 唤起视频全屏播放
     */
    function fullscreen()
    {
        ChimeeMobilePlayer.$fullscreen();
    }

通过如上代码，操作视频全屏，但是全屏之后，右下角全屏/缩小按钮仍为全屏状态，点两次才能把视频缩小，并且第二次点击触发到了下一层事件

window.WeixinJSBridge 以及WeixinJSBridge.invoke都已经不存在了吧。现在都是window.wx了

🚨 You need to enable Continuous Integration on all branches of this repository. 🚨

To enable Greenkeeper, you need to make sure that a commit status is reported on all branches. This is required by Greenkeeper because it uses your CI build statuses to figure out when to notify you about breaking changes.

Since we didn’t receive a CI status on the greenkeeper/initial branch, it’s possible that you don’t have CI set up yet. We recommend using Travis CI, but Greenkeeper will work with every other CI service as well.

If you have already set up a CI for this repository, you might need to check how it’s configured. Make sure it is set to run on all new branches. If you don’t want it to run on absolutely every branch, you can whitelist branches starting with greenkeeper/.

Once you have installed and configured CI on this repository correctly, you’ll need to re-trigger Greenkeeper’s initial pull request. To do this, please delete the greenkeeper/initial branch in this repository, and then remove and re-add this repository to the Greenkeeper App’s white list on Github. You'll find this list on your repo or organization’s settings page, under Installed GitHub Apps.

全屏模式下，点击退出全屏按钮穿透到全屏按钮下一层的元素（右下角）的绑定的点击事件

如题，似乎没有响应的参数可设置

error：ChimeeMobilePlayer is not defined

html:
<div class="preview-video">
<div class="paddinger" @click="setPreviewVideoShow"></div>
<div id="PreviewVideo"></div>
<div class="paddinger" @click="setPreviewVideoShow"></div>
</div>

js:
let player = new ChimeeMobilePlayer({
wrapper: '#PreviewVideo', // video dom容器
src: 'xxxxxxx.mp4',
// kernels: [],
box: 'native',
isLive: false,
autoplay: true,
controls: true,
playsInline: true,
preload: true,
x5VideoPlayerFullscreen: true,
x5VideoOrientation: 'portrait',
xWebkitAirplay: true,
muted: false,
crossOrigin: true
})
player.play()

issue:
if i set the box attribute = 'native', the video can't play
if i set the box attribute = 'mp4' the video can play

配置如下

plugin: [
          {
            name: chimeePluginMobileControlbar.name,
            majorColor: '#0076ff',
            children: {
              play: {
                icon: {
                  play: '../../assets/play.svg',
                  pause: '../../assets/play.svg'
                }
              }
            }
          }
        ]

最终播放器中渲染出的是字符串‘../../assets/play.svg’，而不是图标，没有报错信息

苹果部分机型不能播放（iPhoneX iPhone8P iPhone6s）.点击播放按钮报错Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.改成静音自动播放也不行。大神，帮忙看一下

您好，非常感谢提供这么好的播放器。

我在使用的时候将自带的插件都移除后removeInnerPlugins: ['chimeeMobiControlbar', 'chimeeState']。

在iphoneX上表现的非常好，在安卓手机上表现也很好。但是测试了两台ios 10上没法播放，只能看见poster图片，看不到任何可点击播放的按钮，点击poster也没有办法进行播放。

如果只移除chimeeMobiControlbar的话，会出现chimeeState提供的播放按钮，但是由于这个是全屏的，造成了没有办法去点击原生提供的播放控件，不知道有啥好的办法么，还是需要自己撸插件。

请问是否解决了在安卓微信上同层播放器全屏的问题？在dev.md 里面看到有涉及到x5videoexitfullscree，但是貌似在代码里面没有找到

网络请求回来时，也就是网络回调里调用播放不能自动播放。不在回调里可以自动播放~

在微信windows端下打开播放器页面，播放按钮及contorlbar上的任意按钮，点击后都没有反应。同时用chrome浏览器打开播放器页面也存在同样的问题