Notice
Recent Posts
Recent Comments
07-11 02:59
YESHTML5
React-Native 용 Youtube Player 본문
반응형
현재 진행중인 프로젝트에 Youtube로 포스팅하는 기능이 있어서, Youtube Player
정확히는 Webview 기반으로 Youtube의 embeded로 된 코드를 컴퍼넌트화 시켰다.
풀코드는 다음과 같다.
/**
* @name Youtube_videoPlayer
* @description
* @guide
*/
import React from 'react'
import {Dimensions, StyleSheet, ViewStyle} from 'react-native'
import WebView from 'react-native-webview'
// type
type Props = {
url: string
width?: number
height?: number
style?: ViewStyle | ViewStyle[]
}
export default function Content({url, width, height, style}: Props) {
// hooks
const _width = width || Dimensions.get('screen').width
const _height = height || (_width * 9) / 16
const _url = url
const html = `
<!DOCTYPE html>
<html>
<head>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<title></title>
<meta HTTP-EQUIV="CACHE-CONTROL" CONTENT="NO-CACHE">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!--스타일시트-->
<style type="text/css">
html,body { margin: 0 !important; padding: 0 !important; }
.iframe100 { display: block; border: none; height: 100vh; width: 100vw; }
</style>
<!--//스타일시트-->
</head>
<body>
<iframe src="${_url}" title="YouTube video player" class="iframe100"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen >
</iframe>
<body>
<html>
`
return (
<WebView
allowsInlineMediaPlayback={true} // ios인라인재생
allowsFullscreenVideo={false}
// mediaPlaybackRequiresUserAction // used to stop auto playing of video in webview as soon as it loads in iOS.
style={[{width: _width, height: _height}, styles.container, style]}
originWhitelist={['*']}
javaScriptEnabled={true}
source={{html: html}}
onMessage={() => {}}
/>
)
}
// styles
const styles = StyleSheet.create({
/**@content */
container: {minHeight: 200, alignSelf: 'center'},
})
/********************************************************
[사용법]
@src는 주소는 https://www.youtube.com/embed/INAoJ2yNVNk 형태로 되어야한다<div className=""></div>
<View style={[layout.row, { justifyContent: 'center' }]}>
<Button label="봄이여오라"
style={styles.button}
onPress={() => {
setInfo('https://www.youtube.com/embed/6AZiZOWcC8A')
}}
/>
<Button label="BK Love"
style={styles.button}
onPress={() => {
setInfo('https://www.youtube.com/embed/INAoJ2yNVNk')
}}
/>
<Button label="Dynamite"
style={styles.button}
onPress={() => {
setInfo('https://www.youtube.com/embed/q8WM16VksmA')
}}
/>
</View>
<VideoYoutue url={info} height={300} />
*********************************************************/
반응형
'React,React-Native' 카테고리의 다른 글
| React-Native ActionSheet (0) | 2022.05.19 |
|---|---|
| useModal hooks React-Native Modal 방법 (0) | 2022.05.19 |
| error Failed to launch the app on simulator, An error was encountered processing the command (domain=com.apple.CoreSimulator.SimError, code=405):Unable to lookup in current state: Shutdown (0) | 2022.05.13 |
| Linking 작업에서 React-Native코드 적용예 (0) | 2022.02.10 |
| tsconfig.json 설정 (0) | 2022.01.18 |
'React,React-Native' Related Articles
more
Comments