최근에는 애니메이션 대신 비디오를 사용하고 스프라이트 애니메이션 대신 비디오를 사용하는 방법을 연구하고 있습니다. 이런 종류의 비디오 인터랙티브 비디오라고합니다.
기존 스프라이트 애니메이션 : 큰 디스크 공간, 느린 다운로드, 특히 온라인 재생 속도가 느려집니다.
온라인으로 플레이 할 때 너무 많은 파일, 너무 많은 http 요청은 느린 응답 또는 비정상적인 동작을 유발합니다. 따라서 스프라이트 애니메이션을 동영상으로 대체 할 수있는 일련의 기술 개발이 시급합니다. 이런 종류의 비디오를 인터랙티브 비디오라고합니다.
기존 비디오의 문제점 :
1. 정사각형 영역에서만 플레이 가능
2. 아이 패드 아래에서는 플레이 할 수있는 창이고 아이폰 아래에서는 전체 화면으로 만 플레이 할 수 있습니다.
3. 플레이 할 때 반드시 최전방에 나타납니다.
대화 형 비디오에는 다음과 같은 특성이 있습니다.
iPhone에서는 전체 화면 재생이 필요하지 않으며 한 영역에서 재생할 수 있습니다.
대화 형 비디오는 일반 그래픽 개체 아래에 나타날 수 있습니다.
인터랙티브 비디오는 마스크를 가질 수 있으므로 비디오의 배경을 제거하고 비디오와 일반 그래픽 개체를 통합 할 수 있습니다.
슬립폼 공법 선택시 고려사항 재생에 사용되는 영상은 기존 영상으로 설정하겠습니다. 특정 목적으로 사용해야하는 비디오의 경우 대화 형 비디오로 설정합니다. 이 연구는 예비 결과를 산출했습니다. 덧붙여서 향후 몇 년 동안 모바일 H5의 오디오 및 비디오 개발에서 발생하는 실제 문제를 요약하고 자체 솔루션을 제공합니다. 최종 실제 효과보기 : PC (> IE9), iphone, ipad, Android 5.0과 호환
iPhone에서 수동, 자동 및 창 문제를 해결하면 기본적으로 실제 생산에 사용됩니다. 오른쪽은 원본 비디오 mp4 파일이고 왼쪽의 비디오는 애니메이션을 대체 한 다음 배경 마스크 효과를 지원하고 기본 맵을 표시 할 수 있으며 일련의 상호 작용 작업을 지원합니다.
H5 오디오
오디오 개체가 새 오디오를 통해 전달 될 때마다 IOS에서 새 스레드를 볼 수 있습니다.
솔루션 : 다른 오디오 주소를 대체하여 새로운 오디오 개체는 더 많은 스레드를 열지 않는 목표를 달성합니다.
Android에서 지원이 좋지 않음
해결 방법 : Android 하위 버전의 문제는 해결되지 않습니다. 일반적으로 혼합 개발은 phonegap과 같은 기본 인터페이스를 조정하여 처리 할 수 있습니다.
iPhone에서 자동 재생할 수 없음
해결책 : 아이폰에서 자동 재생은 IOS가 설계되었을 때 수행되는 프로세스입니다. 교통의 자동 절도를 막는 것 같습니다.
간단히 말해, 사용자를 시뮬레이션하여 수동으로 트리거해야하므로 맨 처음에이 코드를 호출해야합니다.
코드 복사
// ios 브라우저가 자동으로 오디오를 재생할 수없는 문제 수정. 로드 할 때 새 오디오를 만들고 사용할 때 src를 바꿉니다.
Xut.fix = Xut.fix || {};
if (Xut.plat.isBrowser && Xut.plat.isIOS) {
var isAudio = 거짓
var fixaudio = function () {
if (! isAudio) {
isAudio = 사실;
Xut.fix.audio = new Audio ();
document.removeEventListener ( 'touchstart', fixaudio, false);
}
};
document.addEventListener ( 'touchstart', fixaudio, false);
}
위의 코드 복사
이러한 코드를 본문에 바인딩하는 경우 : 수동으로 트리거하여 오디오 개체를 만든 다음 전역
다음과 같이 사용하는 경우 :
코드 복사
// iOS 브라우저의 src를 지정하기 위해 Xut.fix.audio를 사용하는 경우 초기화를 위해 app.js를 참조하십시오.
if (Xut.fix.audio) {
오디오
=
Xut.fix.audio;
audio.src = URL;
} 다른 {
audio = new Audio (url);
}
audio.autoplay = 참;
audio.play ();
오디오 개체를 교체하기 만하면됩니다. 간단히 말해, 재생하려면 사용자 트리거에 의해 생성 된 개체 여야합니다.
H5 비디오 오디오
비디오 태그는 모바일 단말기에서 거의 사용되지 않을 수 있으며 Android 지원이 너무 나쁘고 시각적으로 5.0이 더 좋습니다. iPhone의 오래된 문제는 자동으로 재생할 수 없으며 (데이터 저장, 자매 저장 !!!) 기본값은 전체 화면 제어로 재생됩니다. 오랫동안 저는이 영상 처리를 무시했습니다. Android는 하단 레이어를 사용하고 iPhone은 VideoJS, 내장 플래시 및 h5 스위치를 직접 사용하며 플래시도 지원 문제가 있습니다. 얼마 전 사장님에게 요구가있었습니다. 너무 많은 애니메이션을 적용했는데, 모두 하나의 앱에서 수백 메가 바이트에서 수백 메가 바이트에 이르는 스프라이트 경로의 애니메이션이 결합 되었기 때문에 이미지를 압축하는 솔루션이 시급합니다. 최종 해결책은 비디오 압축 기술이 수년 동안 개발되었고 매우 성숙했기 때문에 애니메이션 대신 비디오를 사용하는 것입니다. 이제 비디오 압축 기술은 720P를 쉽게 변환 할 수 있습니다. 10M / min 또는 160K / sec로 압축 된 고화질 영화. 이미지 시퀀스의 파일 크기는 최소한 수십 배 더 작습니다. 동시에 대부분의 장치는 비디오의 하드웨어 압축 해제를 지원하므로 비디오 재생의 CPU 소비가 매우 낮고 배터리 소비도 매우 낮으며 재생 속도도 빠릅니다. 25 프레임의 전체 화면 재생도 쉽게 달성 할 수 있습니다.
계획이 확정되고 해결해야 할 몇 가지 문제가 여기에 있습니다.
비디오의 일부 개체를 포함한 전체 비디오는 iPhone에서 사용자 클릭, 슬라이드 및 기타 작업에 응답 할 수 있고, 창에서 재생할 수 있으며, 배경을 필터링 할 수 있으며, PNG 이미지처럼 사용할 수 있습니다. 비디오는 애니메이션을 대체 한 다음 기본 이미지를 드러 낼 수있는 배경 마스크 효과를 지원하고 수동, 자동 및 불완전한 화면 문제도 해결합니다.
아이폰 윈도우
솔루션 : 캔버스 + 비디오 태그를 통한 처리 결합
원리 : 비디오의 원본 이미지 프레임을 가져 와서 canavs를 통해 페이지에 그립니다.
여기에 소스 코드를 직접 첨부하고 코드는 일반적으로 작성되었지만 몇 가지 핵심 사항을 강조합니다.
http://iwearshorts.com/blog/inline-video-on-the-iphone/
http://stackoverflow.com/questions/3699552/html5-inline-video-on-iphone-vs-ipad-browser
애니메이션 대신 비디오
이것은 약간 번거 롭습니다. 이미지 제어 목적을 달성하려면 대화 형이어야하며 캔버스를 드래그해야합니다. 나는 아직 모든 글을 다 쓰지 않았고, 일반적인 회사의 필요는 이것을 가지지 못할 것입니다. 다음은 간단한 설명입니다. 캔버스 + 비디오로도 처리되지만 사전 처리를 수행하려면 캐시 된 캔버스 컨테이너가 필요합니다. 전처리를 통해 각 그림의 픽셀을 얻고 각 픽셀 RBG의 값을 변경하여 배경을 걸러내어 PNG 이미지처럼 사용할 수 있습니다. 나중에 써서 게시하겠습니다 ~~
우리의 다른 제품 :
