CSS 비디오 배경이 작동하지 않습니다.

Question

기술 : ReactJS, SAAS.

내가 갖고 싶은 것 : 백그라운드에서 자동 재생, 음소거가 반복되는 동영상.

내 이슈 : 샘플 비디오로 일부 예제 코드를 업로드 할 때 모든 것이 예상대로 작동하고있었습니다. 문제는 백그라운드에서 다른 동영상을 갖고 싶다는 것입니다. 나는 그것을 vimeo에 두어 보았고 나의 컴퓨터에서 그것을 사용했다. 그리고 거기에서 옵션은 작동하지 않는다. vimeo에서 제공하는 URL을 사용할 때 아무 것도 렌더링되지 않으며 오류나 콘솔 경고가 표시되지 않습니다. 또한 요소에 비디오가 표시되지 않습니다. 내 컴퓨터에서 업로드 할 때 나는 오류가 있어요 :

GET http://localhost:8888/book.mp4 404 

또는 전체 경로를 사용하는 경우 코드

.background_video{ 
    height: 100%; 
    width: 100%; 
    float: left; 
    top: 0; 
    padding: none; 
    position: fixed; 
} 

import React, {Component} from 'react'; 

import styles from './Share.scss' 

class Share extends Component { 
    render() { 
     return (
      <div className={styles.layout}> 
       <video className={styles.background_video} autoPlay loop muted> 
        <source src="https://player.vimeo.com/video/239482445" 
          type="video/mp4"/> 
        <source src="https://player.vimeo.com/video/239482445" 
          type="video/ogg"/> 
        Your browser does not support the video tag. 
       </video> 
       </div> 
    )} 
} 

export default Share; 

SCSS를

Not allowed to load local resource: file:///C:/pathToFile 

파일 반응

Answer 1

전체 html Vimeo 페이지를 비디오 소스로 제공하려고합니다 (https://player.vimeo.com/video/239482445가 반환하는지 확인). <video>의 HTML 태그 <source>은 다른 HTML 페이지가 아닌 실제 비디오에 대한 링크를 가져와야하기 때문에이 기능이 작동하지 않습니다.

여기에서 갈 수있는 두 가지 방법이 있습니다.

1. 실제 비디오 링크를 src 속성에 추가하십시오. 예를 들어, <source src="http://www.coverr.co/s3/mp4/Vacay_Mode.mp4" type="video/mp4"/>

2. iframe의 Vimeo 링크를로드하고 API를 처리하여 모든 버튼과 사용자 아바타와 같은 불필요한 콘텐츠를 삭제합니다. Vimeo에는 유료 기능 btw와 같은 API 옵션이 있습니다.

옵션 # 2에도 문제가 있습니다. Vimeo는 화면에 맞게 비디오의 너비와 높이를 조정하므로 비디오 비율이 화면 비율과 100 % 일치하지 않으면 비디오 주위에 검은 색 보어가 생깁니다.

정적 폴더에서 비디오를로드하려면 Express와 같은 서버를 실행해야합니다. 오인하지 않으면 로컬 파일 시스템 요청을 통해 액세스 할 수 없습니다.