(null);\n\n const handleGetPlayer = () => {\n const player = playerRef.current?.getPlayer();\n console.log('Player instance:', player);\n };\n\n return (\n \n console.error('播放错误:', error)}\n />\n \n
\n );\n}\n```\n\n### 试看功能\n\n```tsx\nimport React, { useState } from 'react';\nimport WebVideoPlayer from '@cqsjjb/web-video-player';\n\nfunction TrialExample() {\n const [trialEnded, setTrialEnded] = useState(false);\n\n const handleTrialEnded = () => {\n setTrialEnded(true);\n alert('试看结束，请购买完整版');\n };\n\n return (\n \n {trialEnded && (\n
\n 试看已结束，请购买完整版继续观看\n
\n )}\n
\n
\n 视频加载失败，请检查网络连接\n
\n)}\n```\n\n### 3. 响应式设计\n\n```tsx\n// 使用 CSS 媒体查询或 JavaScript 动态调整\nconst [playerWidth, setPlayerWidth] = useState('100%');\n\nuseEffect(() => {\n const updateWidth = () => {\n if (window.innerWidth < 768) {\n setPlayerWidth('100%');\n } else {\n setPlayerWidth('800px');\n }\n };\n \n updateWidth();\n window.addEventListener('resize', updateWidth);\n return () => window.removeEventListener('resize', updateWidth);\n}, []);\n```\n\n## License\n\nMIT License - 详见 [LICENSE](LICENSE) 文件\n\n## 版权信息\n\n版权所有：重庆市建教帮科技有限责任公司\n\n作者：1042656836@qq.com\n","readmeFilename":"README.md","keywords":["react","video","player","videojs","video.js","react-video-player","web-video-player","education","course"]}