Skip to content

Commit

Permalink
[update] add x5VideoPlayerType
Browse files Browse the repository at this point in the history 
fixed [https://github.com/Chimeejs/chimee/issues/68](https://github.com/Chimeejs/chimee/issues/68)
  • Loading branch information
@toxic-johann
toxic-johann committed Jan 9, 2018
1 parent 5178418 commit ce3fcbd
Show file tree
Hide file tree
Showing 6 changed files with 44 additions and 11 deletions.
2 changes: 1 addition & 1 deletion __tests__/dispatcher/plugin.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -484,7 +484,7 @@ describe('dispatcher/plugin', () => {
expect(plugin.playsInline).toBe(true);
expect(getAttr(dispatcher.dom.videoElement, 'playsinline')).toBe('');
expect(getAttr(dispatcher.dom.videoElement, 'webkit-playsinline')).toBe('');
expect(getAttr(dispatcher.dom.videoElement, 'x5-video-player-type')).toBe('h5');
expect(getAttr(dispatcher.dom.videoElement, 'x5-playsinline')).toBe('');
});
test('x5VideoPlayerFullscreen', () => {
plugin.x5VideoPlayerFullscreen = true;
Expand Down
22 changes: 20 additions & 2 deletions __tests__/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -419,19 +419,37 @@ describe('Chimee', () => {
expect(player.playsInline).toBe(true);
expect(getAttr(videoElement, 'playsinline')).toBe('');
expect(getAttr(videoElement, 'webkit-playsinline')).toBe('');
expect(getAttr(videoElement, 'x5-video-player-type')).toBe('h5');
expect(getAttr(videoElement, 'x5-playsinline')).toBe('');
videoElement.playsInline = false;
expect(player.playsInline).toBe(false);
expect(getAttr(videoElement, 'playsinline')).toBe('');
expect(getAttr(videoElement, 'webkit-playsinline')).toBe('');
expect(getAttr(videoElement, 'x5-video-player-type')).toBe('h5');
expect(getAttr(videoElement, 'x5-playsinline')).toBe('');
});
test('playsinline with videoconfigready = false', () => {
player.__dispatcher.videoConfigReady = false;
player.playsInline = true;
expect(player.playsInline).toBe(true);
expect(getAttr(videoElement, 'playsinline')).toBe(null);
expect(getAttr(videoElement, 'webkit-playsinline')).toBe(null);
expect(getAttr(videoElement, 'x5-playsinline')).toBe(null);
});
test('x5VideoPlayerType', () => {
expect(player.x5VideoPlayerType).toBe();
expect(getAttr(videoElement, 'x5-video-player-type')).toBe(null);
player.x5VideoPlayerType = 'h5';
expect(player.x5VideoPlayerType).toBe('h5');
expect(getAttr(videoElement, 'x5-video-player-type')).toBe('h5');
player.x5VideoPlayerType = false;
expect(player.x5VideoPlayerType).toBe();
expect(getAttr(videoElement, 'x5-video-player-type')).toBe(null);
});
test('x5VideoPlayerType with videoconfigready = false', () => {
expect(player.x5VideoPlayerType).toBe();
expect(getAttr(videoElement, 'x5-video-player-type')).toBe(null);
player.__dispatcher.videoConfigReady = false;
player.x5VideoPlayerType = 'h5';
expect(player.x5VideoPlayerType).toBe();
expect(getAttr(videoElement, 'x5-video-player-type')).toBe(null);
});
test('get playsinline when playsInline of videoElement is undefined', () => {
Expand Down
2 changes: 1 addition & 1 deletion build/rollup.config.base.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ const { version, name, author, license, dependencies } = require('../package.jso
export const banner = `
/**
* ${name} v${version}
* (c) 2017 ${author}
* (c) 2017-${(new Date().getFullYear())} ${author}
* Released under ${license}
*/
`;
Expand Down
5 changes: 3 additions & 2 deletions doc/zh-cn/chimee-api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -223,10 +223,11 @@ const chimee = new Chimee({
| muted | 是否静音 | boolean | false | |
| preload | 是否预加载 | boolean | undefined | |
| poster | 封面 | string | '' | |
| playsInline | 是否内联 | boolean | false | 我们会为此添加 `playsinle="true" webkit-playsinline="true" x5-video-player-type="h5"` |
| playsInline | 是否内联 | boolean | false | 我们会为此添加 `playsinle webkit-playsinline x5-playsinline` |
| xWebkitAirplay | 是否添加 `x-webkit-airplay` | boolean | false | |
| x5VideoPlayerFullscreen | 是否添加`x5-video-play-fullscreen` | boolean | false | |
| x5VideoOrientation | ` x5-video-orientation` | string \| void | undefined | 可选 landscape 和 portrait |
| x5VideoPlayerType | ` x5-video-player-type` | 'h5' \| void | undefined | |
| playbackRate | 回放速率 | number | 1 | 大于1加速，小于1减速 |
| defaultPlaybackRate | 默认回放速率 | number | 1 | 大于1加速，小于1减速 |
| autoload | 设置`src`时是否进行自动加载 | boolean | true | |
Expand All @@ -240,7 +241,7 @@ const chimee = new Chimee({
>
> 1. 在 iOS 下需要 inline 的模式下才能自动播放，因此在传入的时候需要设置 `inline: true`。我们会为你设置`playsinline="true" webkit-playsinline="true"`
> 2. 然而并不是所有 iOS 的 webview 都支持该模式，如果你的 iOS 版本比较旧，请检查 webView 上有否设置 `webview.allowsInlineMediaPlayback = YES;`
> 3. 在腾讯的 X5 浏览器也需要同理，设为 `inline: true`，我们会为你设置 `x5-video-player-type="h5"`
> 3. 在腾讯的 X5 浏览器也需要同理，设为 `inline: true`，我们会为你设置 `x5-playsinline`
> 4. 部分浏览器必须要一开始就添加 video 元素，此时，请将 wrapper 的 html 写成如下格式。
>
> ```html
Expand Down
5 changes: 3 additions & 2 deletions doc/zh-cn/plugin-api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1273,10 +1273,11 @@ player.$del(test, 'bar'); // {foo: 2}, {foo: 2}
| muted | 是否静音 | boolean | false | |
| preload | 是否预加载 | boolean | auto | |
| poster | 封面 | string | '' | |
| playsInline | 是否内联 | boolean | false | 我们会为此添加 `playsinle="true" webkit-playsinline="true" x5-video-player-type="h5"` |
| playsInline | 是否内联 | boolean | false | 我们会为此添加 `playsinle webkit-playsinline x5-playsinline` |
| xWebkitAirplay | 是否添加 `x-webkit-airplay` | boolean | false | |
| x5VideoPlayerFullscreen | 是否添加`x5-video-play-fullscreen` | boolean | false | |
| x5VideoOrientation | ` x5-video-orientation` | string \| void | undefined | 可选 landscape 和 portrait |
| x5VideoPlayerType | ` x5-video-player-type` | 'h5' \| void | undefined | |
| playbackRate | 回放速率 | number | 1 | 大于1加速，小于1减速 |
| defaultPlaybackRate | 默认回放速率 | number | 1 | 大于1加速，小于1减速 |
| autoload | 设置`src`时是否进行自动加载 | boolean | true | |
Expand All @@ -1290,7 +1291,7 @@ player.$del(test, 'bar'); // {foo: 2}, {foo: 2}
>
> 1. 在 iOS 下需要 inline 的模式下才能自动播放，因此在传入的时候需要设置 `inline: true`。我们会为你设置`playsinline="true" webkit-playsinline="true"`
> 2. 然而并不是所有 iOS 的 webview 都支持该模式，如果你的 iOS 版本比较旧，请检查 webView 上有否设置 `webview.allowsInlineMediaPlayback = YES;`
> 3. 在腾讯的 X5 浏览器也需要同理，设为 `inline: true`，我们会为你设置 `x5-video-player-type="h5"`
> 3. 在腾讯的 X5 浏览器也需要同理，设为 `inline: true`，我们会为你设置 `x5-playsinline`
> 4. 部分浏览器必须要一开始就添加 video 元素，此时，请将 wrapper 的 html 写成如下格式。
>
> ```html
Expand Down
19 changes: 16 additions & 3 deletions src/config/video.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,9 +187,7 @@ const accessorMap = {
const val = value ? '' : undefined;
this.dom.setAttr('video', 'playsinline', val);
this.dom.setAttr('video', 'webkit-playsinline', val);
// fix android wechat bug
this.dom.setAttr('video', 'x5-playsinline', val);
this.dom.setAttr('video', 'x5-video-player-type', value ? 'h5' : undefined);
return value;
},
}),
Expand All @@ -203,6 +201,19 @@ const accessorMap = {
accessor({ set: stringOrVoid }),
accessorCustomAttribute('x5-video-orientation'),
],
x5VideoPlayerType: [
accessor({
set(value) {
if (!this.dispatcher.videoConfigReady) return value;
const val = value === 'h5' ? 'h5' : undefined;
this.dom.setAttr('video', 'x5-video-player-type', val);
return value;
},
get() {
return this.dom.getAttr('video', 'x5-video-player-type') ? 'h5' : undefined;
},
}),
],
xWebkitAirplay: [
accessor({ set(value) { return !!value; }, get(value) { return !!value; } }),
accessorCustomAttribute('x-webkit-airplay', true),
Expand Down Expand Up @@ -286,6 +297,8 @@ export default class VideoConfig {
x5VideoOrientation = undefined;
x5VideoPlayerType = undefined;
xWebkitAirplay = false;
playbackRate = 1;
Expand All @@ -300,7 +313,7 @@ export default class VideoConfig {
_kernelProperty = [ 'isLive', 'box', 'preset', 'kernels', 'presetConfig' ];
@frozen
_realDomAttr = [ 'src', 'controls', 'width', 'height', 'crossOrigin', 'loop', 'muted', 'preload', 'poster', 'autoplay', 'playsInline', 'x5VideoPlayerFullscreen', 'x5VideoOrientation', 'xWebkitAirplay', 'playbackRate', 'defaultPlaybackRate', 'autoload', 'disableRemotePlayback', 'defaultMuted', 'volume' ];
_realDomAttr = [ 'src', 'controls', 'width', 'height', 'crossOrigin', 'loop', 'muted', 'preload', 'poster', 'autoplay', 'playsInline', 'x5VideoPlayerFullscreen', 'x5VideoOrientation', 'xWebkitAirplay', 'playbackRate', 'defaultPlaybackRate', 'autoload', 'disableRemotePlayback', 'defaultMuted', 'volume', 'x5VideoPlayerType' ];
constructor(dispatcher: Dispatcher, config: Object) {
applyDecorators(this, accessorMap, { self: true });
Expand Down

0 comments on commit ce3fcbd

Please sign in to comment.