[bug] 导入报错
d1y opened this issue · 8 comments
d1y commented
main.jsx
import React from 'react'
import Layer from '../../components/layer'
import Dplayer from 'react-dplayer'
const options = {
loop: false,
logo: "https://avatars3.githubusercontent.com/u/17537749?v=4&s=460",
video: {
type: 'flv',
url: "http://192.168.1.6:8000/live/live.flv"
},
screenshot: false
}
export default class extends React.Component {
render() {
return (
<Layer>
<div>
<Dplayer options={{ video: {
url: `http://static.smartisanos.cn/common/video/t1-ui.mp4`
} }} />
</div>
</Layer>
)
}
}报错, 是不是样式的问题?
[ ready ] compiled successfully
/home/d1y/cat/coface/code/next/node_modules/_dplayer@1.25.0@dplayer/dist/DPlayer.min.css:1
button[data-balloon]{overflow:visible}[data-balloon]{position:relative;cursor:pointer}[dat
a-balloon]:after{font-family:sans-serif!important;font-weight:400!important;font-style:nor
mal!important;text-shadow:none!important;font-size:12px!important;background:hsla(0,0%,7%,
.9);border-radius:4px;color:#fff;content:attr(data-balloon);padding:.5em 1em;white-space:n
owrap}[data-balloon]:after,[data-balloon]:before{filter:alpha(opactiy=0);-ms-filter:"progi
d:DXImageTransform.Microsoft.Alpha(Opacity=0)";-moz-opacity:0;-khtml-opacity:0;opacity:0;p
ointer-events:none;transition:all .18s ease-out .18s;position:absolute;z-index:10}[data-ba
lloon]:before{background:no-repeat url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='htt
p://www.w3.org/2000/svg' width='36' height='12'%3E%3Cpath fill='rgba(17, 17, 17, 0.9)' d='
M2.658 0h32.004c-6 0-11.627 12.002-16.002 12.002C14.285 12.002 8.594 0 2.658 0z'/%3E%3C/sv
g%3E");background-size:100% aut
SyntaxError: Unexpected token '{'
at Module._compile (internal/modules/cjs/loader.js:892:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
at Module.load (internal/modules/cjs/loader.js:812:32)
at Function.Module._load (internal/modules/cjs/loader.js:724:14)
at Module.require (internal/modules/cjs/loader.js:849:19)
at require (internal/modules/cjs/helpers.js:74:18)还有, 这个库支不支持 flv? 怎么导入 flv.js然后喂给 react-dplayer?
hnsylitao commented
1、为什么编译不通过，需要看下你的配置，可以提供一下最小可复现的demo吗？
2、怎么引入flv 直接在html 中link 引入进来即可
d1y commented
1、为什么编译不通过，需要看下你的配置，可以提供一下最小可复现的demo吗？
2、怎么引入flv 直接在html 中link 引入进来即可
我使用的是 next.js, 直接 import 这个库就会报错
d1y commented
给后来的朋友们一个(伪)解决方案
import React from 'react'
import 'dplayer/dist/DPlayer.min.css'
import Layer from '../../components/layer'
export default class extends React.Component {
current_live_url = "http://192.168.1.6:8000/live/live.flv"
current_client = {
clientID: `dev`
}
componentDidMount() {
const Dplayer = require('dplayer')
const flvjs = require('flv.js').default
window.flvjs = flvjs
const options = {
container: this.wrap,
video: {
url: this.current_live_url,
type: 'flv'
},
contextmenu: [
{
text: this.current_client['clientID'],
link: '',
},
],
autoplay: true,
live: true,
screenshot: true,
logo: './static/logo.png'
}
const player = new Dplayer(options)
this.dp = player
}
render() {
return (
<Layer isFoot={false}>
<div>
<div ref={ref => this.wrap = ref}></div>
</div>
<div className="text-center" style={{ margin: '1rem auto', width: '100%' }}>
<div className="zi-select-container" style={{ minWidth: '75%' }}>
<select className="zi-select">
<option>x1</option>
<option>x2</option>
</select>
<i className="arrow zi-icon-up"></i>
</div>
</div>
</Layer>
)
}
}hnsylitao commented
可以这样子做，dplayer 引入window的方式，可以放到生命周期内引入，css 引入报错问题，暂时也可以直接引入dplayer css
d1y commented
可以这样子做，dplayer 引入window的方式，可以放到生命周期内引入，css 引入报错问题，暂时也可以直接引入dplayer css
老哥可否添加对 ssr 的支持