모바일 HTML5 오디오 및 비디오 문제와 해결 방법에 대한 자세한 설명

최근에는 애니메이션을 대체하기 위한 비디오의 활용, 스프라이트 애니메이션을 대체하기 위한 비디오의 활용을 연구하고 있습니다. 우리는 이런 종류의 비디오 인터랙티브 비디오를 부릅니다.

1. 큰 디스크 공간, 느린 다운로드, 특히 온라인 재생은 더욱 느려집니다.
2. 파일이 너무 많습니다. 온라인으로 플레이할 때 http 요청이 너무 많으면 응답이 느려지거나 비정상적인 동작이 발생합니다.

따라서 스프라이트 애니메이션을 영상으로 대체할 수 있는 일련의 기술 개발이 시급하다. 우리는 이런 종류의 비디오를 인터랙티브 비디오라고 부릅니다.

1. 기존 동영상은 정사각형 영역에서만 재생할 수 있습니다.
2. 기존 비디오는 iPad에서는 창에서 재생되지만 iPhone에서는 전체 화면에서만 재생할 수 있습니다.
3. 기존 비디오는 재생 시 반드시 전면에 나타납니다.

1. iPhone에서는 전체 화면으로 플레이할 필요 없이 지역별로 플레이할 수 있습니다.
2. 일반 그래픽 개체 아래에 대화형 비디오가 나타날 수 있습니다.
3. 대화형 비디오를 마스크하여 비디오의 배경을 제거하고 비디오를 일반 그래픽 개체와 혼합할 수 있습니다.

그런데, 나는 지난 몇 년 동안 모바일 H5를 개발하는 동안 오디오와 비디오에서 직면했던 실제적인 문제들을 요약하고 나만의 해결책을 제시할 것입니다.

최종 실제 효과를 살펴보세요: PC(>IE9), iPhone, iPad, Android 5.0과 호환 가능

iPhone에서 발생하는 수동, 자동, 윈도우잉 등의 문제점을 해결하고 실제 제작에 기본적으로 활용이 가능합니다.

오른쪽에는 원본 비디오 mp4 파일이 있습니다.

왼쪽의 비디오는 애니메이션을 대체하고 기본 이미지를 표시하고 일련의 대화형 작업을 지원할 수 있는 배경 마스크 효과를 지원합니다.

오디오 개체가 새 오디오를 통과할 때마다 IOS에서 새 스레드가 생성되는 것을 볼 수 있습니다.

해결 방법: 다른 오디오 주소를 대체하여 더 많은 스레드를 열지 않는 목적을 달성하려면 새 오디오 개체를 사용하십시오.

해결책: 하위 버전의 Android에서는 문제가 해결되지 않습니다. 일반적으로 하이브리드 개발에서는 PhoneGap과 같은 기본 인터페이스를 조정할 수 있습니다.

해결 방법: iPhone에서 자동 재생은 IOS가 설계되었을 때 수행되는 프로세스로, 트래픽 자동 도용을 방지하기 위한 것으로 보입니다.

간단히 말해서 사용자가 수동으로 트리거하도록 시뮬레이션해야 하므로 처음에 다음 코드 조각을 호출해야 합니다.

이것은 내 프로젝트에서 가져온 것입니다. 방금 공제했습니다.

 //iOS 브라우저가 오디오를 자동으로 재생할 수 없는 문제를 수정합니다. 로드 시 새 오디오를 생성하고 사용 시 src를 교체합니다. plat.isIOS) { var isAudio = false var fixaudio = function() { if (!isAudio) { isAudio = true; document.removeEventListener('touchstart', fixaudio, false) } }; document.addEventListener('touchstart', fixaudio, false);}

이러한 코드를 본문에 바인딩하는 경우: 수동 트리거를 통해 오디오 개체를 만든 다음 전역에 저장합니다.

사용시에는 다음과 같습니다

 //iOS 브라우저에 대한 src 초기화를 지정하기 위해 Xut.fix.audio를 사용하는 경우 app.jsif(Xut.fix.audio)를 참조하세요. { audio = Xut.fix.audio; audio.src = url;} else { audio = new 오디오(url );}audio.autoplay = true;audio.play();

오디오 개체를 직접 교체하면 됩니다. 간단히 말해서 자동으로 생성하려면 해당 개체를 재생하기 전에 사용자가 트리거해야 합니다.

비디오 태그는 모바일 장치에서 거의 사용되지 않을 수 있습니다. Android 지원은 5.0에서만 향상되었습니다.

iPhone의 오래된 문제는 자동으로 재생할 수 없다는 것입니다(데이터 저장, 여동생을 구하세요!!!). 기본값은 전체 화면 제어 재생입니다.

오랫동안 이 비디오 처리를 무시했습니다. Android는 하단 레이어를 사용하고 iPhone은 내장 플래시가 있으며 h5 전환 플래시도 지원 문제가 있습니다.

얼마 전 상사가 요청을 했습니다. 애플리케이션 애니메이션이 너무 많습니다. 모두 스프라이트 경로의 조합 애니메이션입니다. 하나의 앱은 수백 메가바이트에서 수백 메가바이트에 이릅니다.

따라서 이미지를 압축하는 솔루션이 시급히 필요합니다.

최종 해결책은 애니메이션 대신 비디오를 사용하는 것입니다. 비디오 압축 기술은 수년간 개발되어 매우 성숙해졌기 때문입니다. 현재 비디오 압축 기술은 720P 고화질 영화를 10M/분 또는 160K/초로 쉽게 압축할 수 있습니다. 이는 이미지 시퀀스의 파일 크기보다 최소 수십 배 작습니다. 동시에 대부분의 장치는 비디오의 하드웨어 압축 해제를 지원하므로 비디오 재생 시 CPU 소모가 매우 낮고 배터리 소모도 매우 낮으며 재생 속도는 여전히 빠릅니다. 25프레임의 전체 화면 재생도 쉽게 달성할 수 있습니다.

계획이 확정된 후에는 몇 가지 문제를 해결해야 합니다.

1. 비디오의 특정 개체를 포함한 전체 비디오는 사용자의 클릭, 슬라이드 및 기타 작업에 반응할 수 있습니다.

2. iPhone에서는 창에서 플레이할 수 있습니다

3. 배경을 필터링하여 PNG 이미지처럼 사용할 수 있는 기능

최종 실제 효과는 시작 gif 애니메이션에도 표시됩니다.

비디오는 애니메이션을 대체하고 기본 이미지를 드러낼 수 있는 배경 마스킹 효과를 지원합니다.

동시에 전체 화면이 아닌 수동, 자동 문제도 해결했습니다.

해결책:

캔버스 + 비디오 태그 조합을 통해 처리됨

원리: 비디오의 원본 프레임을 가져와 canavs를 통해 페이지에 그립니다.

여기서는 소스코드를 직접 첨부합니다. 코드는 일반적으로 작성되지만 몇 가지 핵심 사항이 강조되어 있습니다.

http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser

좀 번거롭네요.. 이미지를 제어하려면 캔버스를 드래그해야 합니다. 아직 다 작성하지 않았습니다. 일반 회사 요구 사항에는 이것이 없습니다. 여기에도 간단한 설명이 있습니다. 비디오이지만 전처리를 위해 캐시된 캔버스 컨테이너가 필요합니다. 전처리를 통해 각 이미지의 픽셀을 얻습니다. 각 픽셀의 RBG 값을 변경하면 배경을 필터링하여 PNG처럼 사용할 수 있습니다. 이미지 앞으로는 써놨으니 공개하자~~

위의 내용은 이 기사의 전체 내용입니다. 모든 분들의 학습에 도움이 되기를 바랍니다. 또한 모든 분들이 VeVb Wulin Network를 지지해 주시길 바랍니다.