mirror of
https://github.com/zhw2590582/ArtPlayer.git
synced 2026-10-09 03:46:16 -08:00
Harvey Zhao
1c75731ca9
- Removed the old ArtplayerPluginIframe implementation. - Added ArtplayerToolIframe class with methods for iframe communication. - Implemented postMessage and onMessage methods for message handling. - Created a new TypeScript definition file for ArtplayerToolIframe. - Updated documentation links to point to the new iframe tool. - Added npm ignore file and README for the new package. - Included compiled and uncompiled versions of the new iframe tool. - Updated package.json with relevant metadata and exports.
48 lines
1011 B
JavaScript
48 lines
1011 B
JavaScript
// npm i artplayer-tool-iframe
|
|
// import ArtplayerToolIframe from 'artplayer-tool-iframe';
|
|
|
|
const $iframe = document.createElement('iframe')
|
|
$iframe.allowFullscreen = true
|
|
$iframe.width = '100%'
|
|
$iframe.height = '100%'
|
|
|
|
const $container = document.querySelector('.artplayer-app')
|
|
$container.innerHTML = ''
|
|
$container.appendChild($iframe)
|
|
|
|
const iframe = new ArtplayerToolIframe({
|
|
iframe: $iframe,
|
|
url: '/iframe.html',
|
|
})
|
|
|
|
iframe.message(({ type, data }) => {
|
|
switch (type) {
|
|
case 'fullscreenWeb':
|
|
if (data) {
|
|
$iframe.classList.add('fullscreenWeb')
|
|
}
|
|
else {
|
|
$iframe.classList.remove('fullscreenWeb')
|
|
}
|
|
break
|
|
default:
|
|
break
|
|
}
|
|
})
|
|
|
|
iframe.commit(() => {
|
|
const art = new Artplayer({
|
|
container: '.artplayer-app',
|
|
url: '/assets/sample/video.mp4',
|
|
fullscreen: true,
|
|
fullscreenWeb: true,
|
|
})
|
|
|
|
art.on('fullscreenWeb', (state) => {
|
|
ArtplayerToolIframe.postMessage({
|
|
type: 'fullscreenWeb',
|
|
data: state,
|
|
})
|
|
})
|
|
})
|