HTML5 모바일 오디오 및 비디오 문제와 해결 방법에 대한 자세한 설명
- 黄舟원래의
- 2017-03-21 15:39:222068검색
최근에는 영상을 활용한 애니메이션 대체, 영상을 활용한 스프라이트 애니메이션 대체 등을 연구하고 있습니다. 이런 영상을 인터랙티브 영상이라고 부릅니다.
전통적인 스프라이트 애니메이션:
큰 디스크 공간과 느린 다운로드, 특히 온라인 재생은 더욱 느려집니다
-
파일이 너무 많습니다. 온라인 플레이 시 http 요청이 너무 많으면 응답이 느려지거나 비정상적인 동작이 발생할 수 있습니다
따라서 세트 개발이 시급합니다. 스프라이트 애니메이션 대신 비디오를 사용하는 기술. 이런 종류의 비디오를 인터랙티브 비디오라고 부릅니다
기존 비디오의 문제점:
기존 비디오는 정사각형 영역에서만 재생할 수 있습니다
기존 동영상은 iPad에서는 창에서 재생되지만 iPhone에서는 전체 화면으로만 재생할 수 있습니다.
전통 동영상을 재생하면 반드시 프런트엔드에 나타납니다
인터랙티브 비디오의 특징은 다음과 같습니다.
iPhone에서는 전체 화면으로 재생할 필요가 없으며 특정 영역에서 재생할 수 있습니다
대화형 비디오는 일반 그래픽 개체
- 인터랙티브 동영상에는 마스크가 있어 동영상의 배경을 제거하고 동영상을 일반 그래픽 개체와 통합할 수 있습니다.
오디오와 비디오에서 겪은 실질적인 문제를 정리하고 나만의 솔루션을 제시하겠습니다 최종 실제 효과 살펴보기: PC(>IE9), iPhone, iPad, Android 5.0과 호환
iPhone에서 수동, 자동, 윈도우잉 등의 문제를 해결합니다. , 기본적으로 사용할 수 있습니다. 실제 제작
오른쪽이 원본 동영상 mp4 파일
왼쪽 동영상은 애니메이션을 대체한 후 배경 마스크 효과를 지원하고 베이스를 드러낼 수 있습니다. 지도하고 일련의 대화형 작업을 지원합니다
- 오디오 객체는 매번 새로운 오디오를 통해 전달되며, 이는 IOS에서 볼 수 있습니다. 역겨운 새 스레드가 생성됩니다.
새로운 오디오 객체는 다른 오디오 주소를 대체하여 더 많은 스레드를 열지 않는다는 목적을 달성합니다
- Android에서 불충분한 지원
하위 버전의 Android에서는 문제가 해결되지 않았습니다. 일반적으로 하이브리드 개발은 기본
인터페이스은 iPhone에서 자동으로 사용할 수 없습니다. Play
- 해결 방법:
간단히 말하면 사용자가 수동으로 트리거하도록 시뮬레이션해야 합니다그래서 이 부분을 호출해야 합니다. 시작 부분의 코드:
이것은 내 프로젝트에서 가져온 것입니다. 방금 직접 공제했습니다.
//修复ios 浏览器不能自动播放音频的问题 在加载时创建新的audio 用的时候更换src即可
Xut.fix = Xut.fix||{};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = false
var fixaudio = function() {
if (!isAudio) {
isAudio = true;
Xut.fix.audio = new Audio();
document.removeEventListener('touchstart', fixaudio, false);
}
};
document.addEventListener('touchstart', fixaudio, false);
}
이러한 코드를 본문에 바인딩하는 경우: 수동 트리거링을 통해 오디오 개체를 만든 다음 전역
사용시에는 다음과 같습니다
rree오디오 객체를 직접 교체할 수 있습니다. 쉽게 말하면 사용자가 생성한 객체가 자동으로 트리거되어야 재생됩니다.
H5 비디오 오디오비디오 태그는 모바일 장치에서 거의 사용되지 않을 수 있으며 Android 지원은 5.0에서 시각적으로 향상됩니다. iPhone의 오래된 문제는 자동으로 재생할 수 없으며(데이터 저장, 여동생 저장!!!) 기본값은 전체 화면 제어 재생입니다
오랫동안 Android에서는 이 비디오 처리를 무시했습니다. iPhone은 내장 플래시가 있고 h5 스위칭도 지원 문제가 있습니다
최근 사장님께서 요청하신 애플리케이션 애니메이션이 너무 많습니다. 스프라이트 경로의 애니메이션 조합은 수백 메가바이트에서 수백 메가바이트까지 가능합니다
. 따라서
그림 압축 솔루션이 시급합니다. 최종 해결책은 애니메이션 대신 비디오를 사용하는 것입니다. 비디오 압축 기술은 수년간 개발되어 매우 성숙해졌기 때문입니다. 현재의 비디오 압축 기술은 7HTML5 모바일 오디오 및 비디오 문제와 해결 방법에 대한 자세한 설명0P
고화질 영화를 10M/분 또는 160K/초로 쉽게 압축할 수 있습니다. 이는 이미지 시퀀스의 파일 크기보다 최소 수십 배 작습니다. 동시에 대부분의 기기는하드웨어 동영상 압축 해제를 지원합니다. 이런 방식으로 동영상 재생 시 CPU 소모가 매우 낮고, 배터리 소모도 매우 낮으며, 재생 속도가 빠릅니다. HTML5 모바일 오디오 및 비디오 문제와 해결 방법에 대한 자세한 설명5프레임의 전체 화면 재생도 쉽게 달성할 수 있습니다
.
계획이 확정된 후 몇 가지 문제를 해결해야 합니다
동영상의 특정 개체를 포함한 전체 동영상이 사용자의 클릭과 슬라이드에 반응할 수 있습니다. 수업운영
아이폰에서는 창으로 놀 수 있어요
배경을 걸러낼 수 있어서 PNG처럼 사용할 수 있어요 이미지
최종 실제 효과는 시작하는 gif 애니메이션에도 표시됩니다.
비디오는 애니메이션을 대체한 다음 배경 마스크 효과를 지원합니다. 기본 이미지
동시에 수동, 자동, 전체화면이 아닌 문제도 해결
iphone windowing
원리: 비디오의 원본 프레임을 가져와서 canavs를 통해 페이지에 그립니다.해결책:
캔버스 + 비디오 태그 결합 처리
를 통해
동영상이 애니메이션을 대체합니다
이미지를 제어하려면 상호작용과 캔버스를 드래그해야 하는데 아직 다 작성하지 못했습니다. 아직 일반 기업 요구에는 이런게 없습니다
간단히 설명드리자면 캔버스+비디오로도 처리되지만 전처리를 위해서는 캐시된 캔버스 컨테이너가 필요합니다
전처리를 통해 각 이미지의 각 픽셀의 RBG 값을 변경하여
배경을 필터링하여 사용할 수 있습니다. PNG 이미지 같은
위 내용은 HTML5 모바일 오디오 및 비디오 문제와 해결 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!