<audio>React 에서 HTML5 태그 를 사용하려고하는데 렌더링되지 않습니다.
React를 처음 사용했기 때문에 분명한 것이 누락되었을 수 있습니다.
기존 Drupal 프런트 엔드를 가져 와서 React에서 다시 빌드하고 있습니다.
다른 모든 HTML은 작동하지만 HTML5 <audio>태그는 작동하지 않습니다.
문제를 보여주는 가장 간단한 구성 요소는 다음과 같습니다.
const NoData = () => (
<audio controls="" controlsList="nodownload">
<source src="/sites/default/files/fruits/apples.mp3" type="audio/mpeg" />
</audio>
);
페이지를 볼 때 HTML이 있지만 렌더링되지 않습니다.
이 HTML은 내 사이트의 다른 부분에서 그대로 복사되었으므로 작동합니다.
React 앱은 Drupal 페이지에 임베드되어 있으므로 <audio>태그를 Drupal 페이지 자체에 복사하고 거기에서 작동합니다. React 자체 내부에는 표시되지 않습니다.
<source>태그 의 파일을 읽고 있습니다. 파일을 잘못된 파일로 변경하면 Chrome 개발 도구에 경고가 표시됩니다.
그렇다면 <audio>React 에서 HTML5 태그를 어떻게 사용 합니까?
다음 controls과 같이 떠나십시오 .
const App = () => (
<div>
<audio src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" controls />
<audio controlsList="nodownload" controls>
<source src="https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3" type="audio/mpeg" />
</audio>
</div>
)
ReactDOM.render(<App />, document.getElementById("react"));<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.4/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.4/umd/react-dom.production.min.js"></script>
<div id="react"></div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다