Video ， ， ，, 需要考虑三种情况 需要考虑三种情况, 支持 Ogg Theora 或者 vp8 − 如果这玩意儿没出事的话 的 的 (Opera 、 mozilla 、 chrome) <支持 h.264 的 的 (Safari 、 it 9 、 、 크롬)은 지원하지 않습니다 (IE6, 7, 8). 비디오 태그 사용, 비디오 객체가 사용할 수있는 미디어 속성 및 방법 및 미디어 이벤트를 포함하여 기술 수준의 HTML 5 비디오를 이해해 봅시다.
비디오 레이블 사용비디오 태그에는 SRC, 포스터, 예압, 자동 재생, 루프, 컨트롤, 너비, 높이 및 기타 속성뿐만 아니라 내부적으로 사용되는 라벨이 포함됩니다. <source> 레이블 외에도 비디오 태그에는 지정된 비디오를 재생할 수없는 경우 반환 된 컨텐츠도 포함 할 수 있습니다.
(1) SRC 속성 및 포즈 속성SRC 속성이 사용되는 일을 상상할 수 있습니까? <Img> 레이블과 마찬가지로이 속성은 비디오의 주소를 지정하는 데 사용됩니다. 포스터 속성은 현재 비디오 데이터가 유효하지 않은 경우 그림, 표시 (미리보기 다이어그램)를 지정하는 데 사용됩니다. 잘못된 비디오 데이터는 비디오가로드되고 있으며 이는 비디오 주소의 오류 일 수 있습니다.
<video width = 658 높이 = 444 src = http : //www.youname.com/images/first.mp4 포스터 = http : //www.youname.com/images/first.png toplay> </video>(2) 사전로드 속성
이 속성은 이름을 통해 이해할 수 있습니다. 없음, 메타 데이터, 자동. 이 속성이 사용되지 않으면 기본값은 자동입니다.
<video width = 658 높이 = 444 src = http : //www.youname.com/images/first.mp4 포스터 = http : //www.youname.com/images/first.png toplay preload = 없음> </video >
없음 : 사전로드 없음. 이 속성 값을 사용하면 페이지 제작자가 사용자 가이 비디오를 기대하지 않거나 HTTP 요청을 줄이지 않는다고 생각합니다.
메타 데이터 : 부분 프리로드. 이 속성 값을 사용하여 페이지 제작자는 사용자 가이 비디오를 기대하지는 않지만 일부 메타 데이터 (크기, 첫 번째 프레임, 트랙 목록, 지속 시간 등)를 사용자에게 제공한다고 생각합니다.
자동 : 모든 프리로드.
(3) 자동 재생 속성이름에 의존하는 또 다른 속성은 목적을 알고 있습니다. AutoPlay 속성은 비디오가 자동으로 재생되는지 여부를 비디오로 설정하는 데 사용됩니다. 이는 부울 속성입니다. 그것이 나타나면, 그것은 자동 재생이라는 것을 의미합니다. 즉, 재생되지 않는다는 것을 의미합니다.
<video width = 658 높이 = 444 src = http : //www.youname.com/images/first.mp4 포스터 = http : //www.youname.com/images/first.png toplay preload = 없음> </video >
HTML에서 부울 속성의 값은 참이 아니며 거짓이 아닙니다. 올바른 사용법은 레이블 에이 속성을 사용하면이 시점에서 속성이 쓸모가 없거나 그 값이 그의 이름과 동일하다는 것입니다 (여기서 <video autoplay /> 또는 <비디오 자동 재생 = autoplay />. ));이 속성이 레이블에 사용되지 않으면 거짓을 의미합니다 (자동 재생은 <video />입니다.
(4) 루프 속성<video width = 658 높이 = 444 src = http : //www.youname.com/images/first.mp4 포스터 = http : //www.youname.com/images/first.png toplay loop = loop = </video >
루프 속성이 비디오가 순환되었는지 여부를 지정하는 데 사용되는 것이 분명합니다. 이는 부울 속성이기도합니다.
(5) 속성을 제어합니다<video width = 658 높이 = 444 src = http : //www.youname.com/images/first.mp4 포스터 = http : //www.youname.com/images/first.png toplay preload = none controls = controls> </video>
컨트롤 속성은 브라우저에 사용하여 페이지 제작자가 스크립트를 사용하여 재생 컨트롤러를 생성하지 않으며 브라우저는 재생 컨트롤 바를 사용해야 함을 나타냅니다.
제어 막대에는 재생 일시 정지 제어, 플레이 진행 제어, 볼륨 제어 등이 포함되어야합니다.
각 브라우저의 기본 재생 제어 막대는 인터페이스에서 다릅니다. 내 브라우저의 이상한 문제로 인해 Firefox와 Safari의 비디오 레이블은 정상이 아니므 로이 두 가지는 온라인에서 스크린 샷 만 찾을 수 있습니다.
(6) 너비 속성 및 높이 속성범용 속성은 레이블에 속하므로 이것을 말할 필요가 없습니다.
(7) 소스 태그<video width = 658 높이 = 444 포스터 = http://www.youname.com/images/firs/png autoplay = autoplay preload = none controls> <소스 s> <소스 s rc = http : //www.youname. com/images /firtst.ogv/> <소스 src = http://www.youname.com/images/first.ogg/> </video>
소스 레이블은 여러 옵션을 지정하는 데 사용됩니다 (오디오 태그에는이 레이블도 포함 할 수 있으므로 비디오 대신 미디어를 사용하십시오) (브라우저는 결국 하나만 선택할 수 있음) SRC 속성을 사용할 때 사용합니다.
브라우저는 소스 레이블로 지정된 비디오를 재생할 수 있는지 여부를 감지 할 수 있습니다 (비디오 형식이 지원되지 않으면 비디오가 존재하지 않는 경우). 이 방법은 주로 다른 브라우저에 사용됩니다. 소스 태그 자체는 의미를 의미하지 않으며 혼자서는 나타날 수 없습니다.
이 레이블에는 SRC, 유형 및 미디어의 세 가지 속성이 포함되어 있습니다.
SRC 속성 : 비디오 레이블과 동일한 미디어의 주소를 지정하는 데 사용됩니다.
유형 속성 : SRC 속성 지정된 미디어 유형을 설명하는 데 사용되어 브라우저가 미디어를 얻기 전에 이러한 미디어 형식을 지원할지 여부를 결정하는 데 도움이됩니다.
미디어 속성 : 매체에서 미디어가 사용되는 위치를 설명하는 데 사용되며 기본값은 설정되지 않은 경우 모든 매체를 지원하는 것을 의미합니다. <style> 레이블의 미디어 속성을 생각하십니까? 동일합니다.
(8) 완전한 예<video width = 658 높이 = 444 포스터 = http://www.youname.com/images/firs/png autoplay = autoplay preload = none controls> <소스 s> <소스 s rc = http : //www.youname. com/images /firtst.ogv/> <소스 src = http://www.youname.com/images/first.ogg/> </video>
이 코드는 페이지의 비디오를 정의합니다.이 비디오의 미리보기는 포스터의 속성 값으로, 브라우저의 기본 미디어 제어 막대, 비디오의 메타 데이터, 원형 재생, 900의 폭 픽셀, 240 픽셀의 높이
첫 번째 소스 레이블의 비디오 주소 인 SRC 속성 값, 비디오 카테고리는 OGG 비디오, 오디오 코딩 디코더는 Vorbis입니다. 재생 매체는 디스플레이를 선택합니다 주소는 더 이상 비디오 주소가 더 이상 피곤하지 않습니다. IE와 호환 해야하는 경우 마지막 소스 레이블 후 플래시 플레이어의 레이블 세트를 추가하거나 작은 JavaScript 코드를 사용할 수 있습니다.
요약위는 Xiaobian이 소개 한 HTML 웹 페이지에 비디오를 삽입하는 방법에 대한 요약입니다. VEVB WULIN 웹 사이트를 지원해 주셔서 대단히 감사합니다!