비디오 플레이어 스타일을 사용자 정의하는 방법은 무엇입니까?

이 문서에서는 비디오 플레이어 스타일을 사용자 정의하는 방법을 공유합니다. 내용이 매우 자세하게 설명되어 있어 도움이 되기를 바랍니다.

DIY

이 문서는 HTML5 비디오 API를 기반으로 하며 웹 비디오 플레이어 스타일을 사용자 정의합니다.

사실 네이티브 비디오 태그 스타일은 꽤 좋지만, 사람마다 시각적 경험이 다르기 때문에 네이티브 스타일을 변경해야 할 때가 있을 것입니다.

그럼 화장을 해보세요. 가벼운 화장, 가벼운 화장.

【여기에 코드】

<video class="ppq-video video-hidden" src="https://zhuanjia4v-1252768022.cossh.myqcloud.com/hualv/437D2592787911E8862FD89EF30F789D.mp4"
       webkit-playsinline="true"
       playsinline="true"
       x-webkit-airplay="allow" // 使video支持ios的AirPlay功能，需要终端支持
       x5-playsinline 
       poster="https://img02.sogoucdn.com/app/a/200692/42345752787911E8BB8FD89EF30F789D?m-wh=960*540" 
    ></video>

playsinline 속성 추가:

webkit-playsinline="true"
playsinline="true"
x5-playsinline

playsinline 속성은 브라우저 자체에서 구현한 동영상 스타일을 사용하는 대신 동영상을 브라우저 웹뷰에 인라인으로 만들기 위한 것인데 일부 브라우저에서는 이를 인식하지 못합니다. , 즉, 당신은 자신의 것을 사용해야합니다. 예를 들어 UC를 사용하려면 화이트리스트를 구성해야 합니다. 일부 브라우저는 이를 지원하지 않으며 화이트리스트도 없습니다.

Tencent의 x5 및 기타 브라우저의 이러한 속성에 대해서는 해당 기사 [Tencent Browsing Service-H5 동일 레이어 플레이어 액세스 사양]를 읽을 수 있습니다.

Use

$(selector).initVideoPlayer();  // select 为video元素

플레이어 스타일은 git 코드 프로젝트의 데모 폴더에서 별도로 사용할 수 있습니다. CSS에서는 원하는 대로 또는 제품 관리자가 좋아하는 대로 변경할 수 있습니다.

관련 권장 사항:

vue-video-player 사용자 정의 플레이어 만들기

vue-video-player 플레이어를 사용자 정의하는 단계에 대한 자세한 설명

위 내용은 비디오 플레이어 스타일을 사용자 정의하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!