H5 영상 개발에서 겪게 되는 문제점과 해결책-H5 튜토리얼-php.cn

집

웹 프론트엔드

H5 튜토리얼

H5 영상 개발에서 겪게 되는 문제점과 해결책

小云云

Feb 28, 2018 pm 02:18 PM

html5 해결책 질문

최근에는 도트 영상에 동영상을 삽입하는 활동과 축적된 경험을 해왔습니다. 아래에는 저와 다른 사람들이 겪은 함정과 그에 따른 해결책을 기록합니다.
1. 발생한 문제 및 해결 방법
1.1. iOS 웹 페이지의 동영상 재생은 기본적으로 전체 화면으로 설정됩니다(동영상을 클릭하면 전체 화면 재생을 위한 플레이어가 팝업됩니다).
불충분한 전체 화면 재생 문제를 해결하려면 webkit-playsinline='true' 및 presentsinline='true' 속성을 추가하면 됩니다. 위 속성 설정이 효과가 없는 경우 다음 플러그를 사용하여 시도해 볼 수 있습니다. -안에. iphone-inline-video
참고: iOS에서 동영상을 재생하기 위해 Weibo에서 웹페이지를 열면 재생을 위한 플레이어가 표시됩니다. 또한 위의 플러그인을 사용해야 합니다. 효과적이다.
1.2. Android에서 동영상 재생 후 추천 동영상이 표시됩니다.
모바일 브라우저의 동영상 요소는 초기에는 iOS나 Android 브라우저에서 페이지 상단에 위치하여 표시할 수 없었습니다. 씌우다. 나중에 이 문제는 iOS에서 해결되었지만 Android 브라우저에는 문제가 남아 있었습니다. X5는 Webkit을 기반으로 Tencent가 개발한 렌더링 엔진으로, 커버링 문제를 해결하기 위해 "동일 레이어 플레이어"라는 특수 비디오 요소를 제공합니다.

x5-video-player-type="h5" 可以开启同层播放器，来避免播放后显示推荐视频的问题。
x5-video-player-fullscreen="true" //视频全屏播放
x5-video-orientation="portrait"//视频竖屏模式播放

로그인 후 복사

1.3, 비디오 적응
을 설정하면 현재 디자이너들은 일반적으로 iphone5 또는 iphone7의 표준에 따라 비디오를 디자인합니다. 일반적으로 비디오는 여전히 100% 너비와 높이로 재생됩니다. 작동하지 않는 경우 실제 상황을 기반으로 해야 합니다. 상황은 개체 맞춤 속성을 설정하여 해결됩니다. 자세한 내용은 CSS3 object-position/object-fit 속성에 대한 세미 심층 이해를 참조하세요.
참고: 웹킷 커널 브라우저에서 기본값은 object-fit:contain입니다.
1.4. JS는 비디오 재생을 제어합니다
iOS에서는 일반적으로 사용자가 적극적으로 클릭하지 않으면 비디오와 오디오가 적극적으로 재생되지 않으므로 비디오 재생을 제어하려면 js를 사용하여 인터페이스 상호 작용을 모니터링해야 합니다.
비디오 재생 및 일시 정지에는 주로 재생 및 일시 정지 메서드 호출이 포함됩니다. 비디오 재생 중에 일부 사용자 상호 작용이 필요한 경우 현재 재생 시간은 주로 timeupdate 메서드를 통해 모니터링됩니다.

var isStop = false;
    videoElem.on('timeupdate', function () {
        var curTime = parseInt(videoElem[0].currentTime);
        if (curTime == 152) {//该时间点展示交互蒙层
            $('.js_first_stop').removeClass('hide');
        } else if (curTime > 152 && curTime == 153) {
            if (!isStop) {//解决ios暂停后再次点击播放不了问题，因为该处触发了多次，但是andriod没有该问题。
                isStop = true;
                videoElem[0].pause();
            }
        } else if (curTime == 248) {
            $('.js_second_stop').removeClass('hide');
        }
    });

로그인 후 복사

timeupdate 이벤트를 수신하고 iOS에서 비디오를 일시 중지할 때 다음을 수행해야 합니다. 전역 isStop 변수를 도입하지 않으면 다음에 계속 재생하기 위해 클릭할 때 응답이 없지만(timeupdate 중에 여러 번 일시 중지가 발생함) Android에는 이 문제가 없습니다. 동영상의 끝을 확인하려면 동영상의 종료 이벤트

videoElem.on('ended',function(){});

로그인 후 복사

를 모니터링하거나 동영상의 timeupdate 이벤트를 모니터링한 후 종료 속성을 확인하면 true이면 끝났음을 의미하고 false이면 종료됩니다. 아직 끝나지 않았다는 뜻이다.

videoElem.on('timeupdate',function(){
   if(videoElem[0].ended){
    //播放结束
   }
}

로그인 후 복사

또한 Android 측에서는 동일 레이어 플레이어가 활성화되어 있으며, WeChat 측에서도 동일 레이어 플레이어에 들어오고 나가기 위한 2개의 모니터링 이벤트를 제공합니다. 동일한 레이어의 플레이어 이벤트를 입력합니다(동영상 재생 시작).

videoElem.on("x5videoenterfullscreen", function(){}

로그인 후 복사

같은 레이어의 플레이어를 종료하려면 왼쪽 상단에 있는 돌아가기 버튼을 클릭하세요.

videoElem.on('x5videoexitfullscreen',function(){}

로그인 후 복사

마지막으로 주의할 점은 Android에서 동영상을 재생한 후 동일한 레이어에서 플레이어를 적극적으로 종료하지 않는다는 것입니다. 앞으로 디스플레이 인터페이스가 있다면 플레이어에도 표시될 예정인데, 느낌이 매우 이상합니다. 이는 링크점프를 통해 해결할 수 있습니다.
1.5, Canvas에서 비디오 재생
Canvas에서는 비디오를 재생할 수 있지만 일부 andriod 컴퓨터에서는 심각한 앨리어싱이 나타날 수 있으며 일부 andriod 브라우저에서는 재생할 때 소리만 나고 이미지는 없습니다.
1.6. 비디오 인코딩
mp4 형식의 비디오는 h.264로 인코딩되어야 합니다. 그렇지 않으면 일부 iOS에서는 사운드만 있고 이미지는 없습니다.
마지막으로 전체 비디오 구성은 참고용입니다

<video class="js_video" style="object-fit: cover; width: 100%; height: 100%;" preload="load" 
playsinline="true" webkit-playsinline="true" x5-video-player-type="h5" x5-video-player-fullscreen="true"
 x5-video-orientation="portrait"src="https://video.mdcdn.cn/friend2018.mp4"></video>

로그인 후 복사