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

최근에는 영상을 활용한 애니메이션 대체, 영상을 활용한 스프라이트 애니메이션 대체 등을 연구하고 있습니다. 이런 영상을 인터랙티브 영상이라고 부릅니다.

전통적인 스프라이트 애니메이션:

• 큰 디스크 공간과 느린 다운로드, 특히 온라인 재생은 더욱 느려집니다

• 파일이 너무 많습니다. 온라인 플레이 시 http 요청이 너무 많으면 응답이 느려지거나 비정상적인 동작이 발생할 수 있습니다

따라서 세트 개발이 시급합니다. 스프라이트 애니메이션 대신 비디오를 사용하는 기술. 이런 종류의 비디오를 인터랙티브 비디오라고 부릅니다

기존 비디오의 문제점:

• 기존 비디오는 정사각형 영역에서만 재생할 수 있습니다

• 기존 동영상은 iPad에서는 창에서 재생되지만 iPhone에서는 전체 화면으로만 재생할 수 있습니다.

• 전통 동영상을 재생하면 반드시 프런트엔드에 나타납니다

• 
  

인터랙티브 비디오의 특징은 다음과 같습니다.

• iPhone에서는 전체 화면으로 재생할 필요가 없으며 특정 영역에서 재생할 수 있습니다

• 대화형 비디오는 일반 그래픽 개체

• 인터랙티브 동영상에는 마스크가 있어 동영상의 배경을 제거하고 동영상을 일반 그래픽 개체와 통합할 수 있습니다.

요약: 단순히 재생되는 비디오는 일반 비디오로 설정하겠습니다. 특정 목적으로 사용해야 하는 비디오의 경우 대화형 비디오로 설정합니다.

일차적으로 연구 결과가 나왔습니다. 그런데 지난 몇 년간의 모바일 H5 개발 과정에서

오디오와 비디오에서 겪은 실질적인 문제를 정리하고 나만의 솔루션을 제시하겠습니다 최종 실제 효과 살펴보기: PC(>IE9), iPhone, iPad, Android 5.0과 호환

iPhone에서 수동, 자동, 윈도우잉 등의 문제를 해결합니다. , 기본적으로 사용할 수 있습니다. 실제 제작

오른쪽이 원본 동영상 mp4 파일

왼쪽 동영상은 애니메이션을 대체한 후 배경 마스크 효과를 지원하고 베이스를 드러낼 수 있습니다. 지도하고 일련의 대화형 작업을 지원합니다

H5 오디오 오디오

• 오디오 객체는 매번 새로운 오디오를 통해 전달되며, 이는 IOS에서 볼 수 있습니다. 역겨운 새 스레드가 생성됩니다.

해결책:

새로운 오디오 객체는 다른 오디오 주소를 대체하여 더 많은 스레드를 열지 않는다는 목적을 달성합니다

Android에서 불충분한 지원

해결책:

하위 버전의 Android에서는 문제가 해결되지 않았습니다. 일반적으로 하이브리드 개발은 기본

인터페이스

를 조정하여 처리할 수 있습니다. 🎜>

은 iPhone에서 자동으로 사용할 수 없습니다. Play

• 해결 방법:

iPhone에서 자동 재생이 완료되었습니다. IOS가 설계되었을 때 트래픽 자동 도용을 방지하는 것 같습니다

간단히 말하면 사용자가 수동으로 트리거하도록 시뮬레이션해야 합니다

그래서 이 부분을 호출해야 합니다. 시작 부분의 코드:

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

//修复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프레임의 전체 화면 재생도 쉽게 달성할 수 있습니다

.

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

1. 동영상의 특정 개체를 포함한 전체 동영상이 사용자의 클릭과 슬라이드에 반응할 수 있습니다. 수업운영

2. 아이폰에서는 창으로 놀 수 있어요

3. 배경을 걸러낼 수 있어서 PNG처럼 사용할 수 있어요 이미지

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

비디오는 애니메이션을 대체한 다음 배경 마스크 효과를 지원합니다. 기본 이미지

동시에 수동, 자동, 전체화면이 아닌 문제도 해결

iphone windowing

해결책:

캔버스 + 비디오 태그 결합 처리

를 통해

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

동영상이 애니메이션을 대체합니다

이미지를 제어하려면 상호작용과 캔버스를 드래그해야 하는데 아직 다 작성하지 못했습니다. 아직 일반 기업 요구에는 이런게 없습니다

간단히 설명드리자면 캔버스+비디오로도 처리되지만 전처리를 위해서는 캐시된 캔버스 컨테이너가 필요합니다

전처리를 통해 각 이미지의 각 픽셀의 RBG 값을 변경하여

배경을 필터링하여 사용할 수 있습니다. PNG 이미지 같은

위 내용은 HTML5 모바일 오디오 및 비디오 문제와 해결 방법에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!