지난 몇 년간 대부분의 웹 디자인 서비스 회사에서는 배경 영상을 디자인 요소로 활용하고 있습니다. 이 스타일은 웹 연결을 증폭시켜 더 빨라지고, 비디오 코덱은 더 좋아지며, 심지어 브라우저도 HTML5 비디오에 대한 향상된 지원을 얻을 수 있습니다.
디자인이 좋지 않은 경우 배경 비디오는 페이지의 다른 부분의 속도를 늦추고 방문자가 실제 페이지 콘텐츠에 집중하지 못하게 하는 등 해로운 결과를 초래할 수 있으며, 패닝이나 움직임이 너무 많으면 사용자의 기분이 나쁘거나 불안해지게 만들 수도 있습니다 유튜브 프리미엄 할인.
반대로, 잘 만들어지면 배경 영상은 불필요한 관심을 더해주는 웅장하고 섬세한 디자인 터치가 될 수 있습니다.
따라서 실수를 피하려면 배경 비디오를 디자인할 때 다음 간단한 지침을 따르십시오.
압축된 비디오를 갖는 것이 항상 더 좋습니다
큰 비디오를 가지고 있으면 항상 주의가 산만해지며 전체 웹사이트가 느리게 로드된다는 안타까운 느낌을 줍니다.
이를 방지하려면 실제로 비디오를 만족스러워 보이는 가장 낮은 비트 전송률로 압축해야 합니다. 완벽하게 바삭바삭하고 눈길을 끄는 고화질 비디오를 사용하는 것은 매력적이지만 웹사이트 로딩 시간과 스트리밍이 끊어지는 것을 고려할 때 가치가 없습니다.
인공물을 숨기려면 오버레이를 추가하세요.
고품질 비디오이든 저화질 비디오이든 상관없이 비디오 문장에 오버레이를 추가해야 품질을 은폐하는 데 도움이 될 수 있습니다. 비디오 바로 뒤에 완전히 위치한 div를 추가하면 됩니다.
사용자가 비디오를 마우스 오른쪽 버튼으로 클릭하여 일시 중지, 재생, 저장 등을 할 때 비디오가 멈추지 않도록 하려면 특정 비디오에 적절한 CSS 속성을 사용하십시오.
밝은 색상의 반투명 오버레이는 약간의 도움이 되며, 특히 웹 사이트 디자인 색상과 잘 어울리도록 오버레이 색상을 조정하는 경우 정말 기분 좋게 보일 수 있습니다. 패턴이 있는 오버레이는 품질을 위장하는 데 더 효과적이지만 일부 디자인에는 적합하지 않을 수 있습니다.
길이가 짧은 동영상이어야 합니다.
항상 동영상 길이를 30~40초로 제한하세요. 더 좋은 방법은 완벽하게 반복되지만 길이에 따라 크기가 1MB 또는 2MB보다 작은 짧은 동영상을 찾는 것입니다.
비디오가 콘텐츠를 지배해서는 안 됩니다.
비디오는 웹사이트 콘텐츠를 보완해야 하며, 초점을 빼앗기지 않도록 하고 싶습니다. 배경 비디오는 방문객이 웹사이트에서 실제로 해야 할 일에 집중하지 못하도록 섬세하고 매끄러워야 합니다. 이는 과도한 패닝, 흔들리거나 불안정한 영상과 같은 특정 사항을 피해야 함을 의미합니다.
전경 텍스트와 대비가 충분해야 합니다.
동영상 위에 텍스트가 있는 경우 읽을 수 있는지 확인하는 것이 중요합니다. 텍스트 색상이 비디오와 충돌하는 경우 텍스트를 구별하기 위해 오버레이를 추가하거나 텍스트 색상을 변경하거나 텍스트 그림자 또는 배경을 제공해야 할 수도 있습니다.
모바일 장치에 배경 비디오 지원을 넣지 마십시오.
웹페이지에 일반 비디오를 삽입하는 경우에는 괜찮습니다. 단지 추가 디자인 작업이고 중요한 정보를 포함하지 않는 경우에는 배경 이미지를 사용하는 것이 좋습니다. 왜냐하면 안드로이드 기기도 일반적으로 제대로 재생되지 않기 때문에 모바일에서는 동영상을 비활성화하고 배경 이미지를 선택하는 것이 더 나을 것입니다.
일시 정지 버튼을 제공하는 것이 더 좋습니다
가끔 동영상을 일시중지하고 싶어하는 사용자도 있을 것입니다. 주의가 산만해지거나 시스템 속도가 느려지고 싶다고 느끼는지 여부. 사용자 정의 JavaScript 또는 jquery를 사용하여 일시 중지/재생 버튼을 간단히 추가할 수 있습니다. 일시 중지/재생 버튼 기본값이 추가되며 원하는 대로 배치하고 스타일을 지정할 수 있습니다.