모바일 단말기에서 html5 비디오의 문제점을 해결하는 방법에 대한 간략한 논의

이 기사에서는 이러한 문제점을 해결한 html5 비디오 모바일 단말기를 소개하고 자세한 내용을 여러분과 공유합니다.

 <video id=video style=object-fit:fill autoplay webkit-playsinline presentsinline x5-video-player-type=h5 x5-video-player-fullscreen=true x5-video-orientation=portraint src=video.mp4 />< /video><!-- object-fit: fill 비디오 콘텐츠가 전체 비디오 컨테이너를 채웁니다. Poster:img.jpg 비디오 표지 자동 재생: 자동 재생 자동 - 페이지가 로드될 때 전체 비디오 로드 메타 - 페이지가 로드될 때 메타데이터만 로드 없음 - 페이지가 로드될 때 비디오를 로드하지 않음 음소거: 이 속성이 설정되면 비디오의 오디오 출력이 음소거되어야 함을 지정합니다. -playsinline presentsinline : 인라인 재생 x5-video-player-type=h5 : x5 코어 H5 플레이어 x5-video-player-fullscreen=true 전체 화면 설정을 활성화합니다. true 및 false 설정은 다른 레이아웃으로 이어집니다. x5-video-orientation=portraint: 플레이어가 지원하는 방향을 선언합니다. 선택 값은 가로 가로 화면과 세로 세로 화면입니다. 기본값은 세로입니다. 라이브 방송이든 전체 화면 H5이든 일반적으로 수직으로 재생되지만 이 속성에는 H5 모드를 활성화하려면 x5-video-player-type이 필요합니다 -->

 <동영상 자동재생></video>

그러나 많은 모바일 브라우저에서 오디오 및 비디오를 자동으로 재생하려면 video.play() 호출을 트리거하기 위해 사용자의 실제 작업(touchend, click, doubleclick 또는 keydown 이벤트와 같은 표준 이벤트)이 필요합니다.

 dom.addEventListener('click', function () { video.play()})

Video.play()는 wx.ready()에서도 실행될 수 있습니다.

 wx.ready(함수 () { video.play()})

webkit-playsinline presentsinline 속성을 설정합니다.

 <video id=video webkit-playsinline presentsinline /></video>

iOS Safari 및 일부 Android 브라우저에서 동영상을 재생할 때 h5 페이지에서 동영상을 재생할 수 없으며 시스템이 자동으로 동영상을 이어받습니다.

h5 페이지에서 동영상을 재생하려면 video 태그에 webkit-playsinline을 추가해야 합니다. iOS 10 이후에는 이 두 속성을 동시에 추가하는 것이 좋습니다. 앱도 이 모드를 지원해야 합니다.

 webview.allowsInlineMediaPlayback = 예;

iOS 모바일 QQ와 위챗 모두 이 모드를 지원하지만, 안드로이드 위챗이 끊깁니다.

Android WeChat의 내장 브라우저는 Tencent X5 커널을 사용하며 X5web 표준을 따르지 않습니다. 그 중 하나는 강제 전체 화면 비디오입니다. 영상이 재생되면 QQ만의 추천 영상이 나타납니다.

화이트리스트가 있다고 하는데, 화이트리스트에 있는 비디오 리소스가 전체 화면이 되지 않습니다. 하지만 Tencent는 더 이상 화이트리스트에 추가할 수 없습니다. 비뇨기과, 해결책이 없습니다. . . . . .

현재 h5 캔버스를 사용하여 비디오를 재생하는 솔루션이 있습니다.

캔버스 사용 시 부딪히는 함정: 영상에 x5-video-player-type=h5 속성을 추가해야 합니다. 그렇지 않으면 영상이 모바일 단말에 걸려서 재생할 수 없게 됩니다. 개인적으로는 영상이 장악되기 때문이라고 생각합니다.

 <div class=wrapper> <video id=video style=display: none autoplay src=video.mp4 x5-video-player-type=h5></video> <canvas id=canvas></canvas></div> <script> var video = document.querySelector('#video') var canvas = document.querySelector('#canvas') var Wrapper = canvas.parentNode var width = Wrapper.offsetWidth var height = Wrapper.offsetHeight var ctx = c.getContext('2d') var time = null canvas.width = width canvas.height = height canvas.addEventListener('click', function () { video.play( ) }) video.addEventListener('play', function () { time = window.setInterval(function () { ctx.drawImage(v, 0, 0, 너비, 높이); }, false); video.addEventListener('pause', function () { window.clearInterval(time); }, false); , function () { window.clearInterval(time) }, false);</script>

마지막으로 동영상 재생에는 캔버스가 사용되지만 Android WeChat에서는 전체 화면 동영상 재생 후 추천 동영상이 차단될 수 있는 것으로 나타났습니다. 하지만 동영상 재생 시 전체 화면 문제를 비활성화할 수 있는 방법은 없습니다. 여전히 사악한 화이트리스트를 얻으십시오. 불만을 제기하십시오. . . . . . . . . . . . . . . .

더욱 짜증나는 점은 js를 통해 전체 화면 종료를 실행하는 방법을 찾지 못했다는 것입니다.

iOS에서 동영상 재생 시 검은색 화면이 잠시 나타났다가 정상적으로 표시됩니다.

해결책:

비디오 위에 div를 추가하고 이미지로 채워서 재생하기 전에 로딩되는 듯한 느낌을 줍니다. 그런 다음 timeupdate 이벤트를 수신하고 비디오가 재생될 때 이 div 블록을 제거하십시오.

 video.addEventListener('timeupdate', function(){ if(video.currentTime > 0.1){ PosterImg.hidden(); }})

HTMLVideoElement 및 HTMLAudioElement는 모두 HTMLMediaElement에서 상속됩니다.

 //미디어 오류 MediaObj.error; //null: 일반 MediaObj.error.code; //1. 사용자 종료 2. 네트워크 오류 3. 디코딩 오류 4. 잘못된 URL //미디어 Obj.currentSrc의 현재 상태입니다. /현재 리소스로 돌아가기 URLMediaObj.src = value; //현재 리소스를 반환하거나 설정합니다. URLMediaObj.canPlayType(type) //특정 형식의 리소스를 재생할 수 있는지 여부 MediaObj.networkState; //0. 이 요소는 초기화되지 않았습니다. 1. 정상이지만 네트워크를 사용하지 않습니다. 2. 데이터를 다운로드하는 중입니다. 3. 리소스 MediaObj.load()를 찾을 수 없습니다. //src MediaObj.buffered에 의해 지정된 리소스를 다시 로드합니다. 버퍼링된 영역으로 돌아가기, TimeRangesMediaObj.preload; //none: 메타데이터를 미리 로드하지 않음: 리소스 정보를 미리 로드함 auto://ready state MediaObj.readyState //1:HAVE_NOTHING //2:HAVE_METADATA //3.HAVE_CURRENT_DATA //4.HAVE_FUTURE_DATA //5.HAVE_ENOUGH_DATAMediaObj.seeking; //검색 중인지 여부//재생 상태 MediaObj.currentTime = value; //현재 재생 위치에 따라 할당이 변경될 수 있습니다. 위치 MediaObj .startTime; //일반적으로 0, 0부터 시작하지 않는 스트리밍 미디어 또는 리소스인 경우 0MediaObj.duration이 아닙니다. //현재 리소스 길이 스트림은 무한한 MediaObj.paused를 반환합니다. //MediaObj.defaultPlaybackRate = 값 ; //기본값 재생 속도는 MediaObj.playbackRate = value로 설정할 수 있습니다. //현재 재생 속도는 MediaObj.played 설정 후 즉시 변경합니다. //재생된 영역인 TimeRanges를 반환합니다. MediaObj.seekable은 아래를 참조하세요. //검색할 수 있는 영역을 반환합니다. TimeRangesMediaObj.ended; //MediaObj.autoPlay를 자동으로 재생할지 여부; .loop; //예 루프 재생 MediaObj.play(); //MediaObj.pause(); //일시 중지//비디오 제어 MediaObj.controls;//기본 컨트롤 막대가 있는지 여부 MediaObj.volume = value; //Volume MediaObj.muted = value; //Mute//TimeRanges(지역) object TimeRanges.length; /Region 세그먼트 수 TimeRanges.start(index) //인덱스 세그먼트 영역의 시작 위치 TimeRanges.end(index) //인덱스 섹션의 끝 위치 //[★★★**관련 이벤트**★★★]//이벤트 분포 var eventTester = function(e){ Media.addEventListener(e, function(){ console.log ((new Date()).getTime(),e) },false);}//이벤트 모니터링 eventTester(loadstart); //클라이언트가 데이터 요청을 시작합니다. eventTester(progress); //클라이언트가 데이터를 요청하고 있습니다. //다운로드가 지연되었습니다. eventTester(abort); //클라이언트가 적극적으로 다운로드를 종료합니다(오류로 인한 것이 아닙니다). eventTester(loadstart) //클라이언트가 데이터 요청을 시작합니다. 진행) ; //클라이언트가 데이터를 요청 중입니다. eventTester(일시 중지); //다운로드가 지연되었습니다. eventTester(abort); //클라이언트가 적극적으로 다운로드를 종료합니다(오류로 인한 것이 아님), eventTester(error); //데이터 요청 시 오류가 발생했습니다. eventTester(play); //play() 및 자동 재생 시작 시 EventTester(pause)가 트리거됩니다. //pause()가 eventTester(loadedmetadata를 트리거합니다. ); //리소스 길이 획득에 성공했습니다. eventTester(loadeddata); //eventTester(waiting) //오류가 아닌 데이터를 기다리는 중입니다. //재생 시작 eventTester(canplay); //재생은 가능하지만 로딩으로 인해 일시 정지될 수 있습니다. //재생 가능, 모든 노래가 로드되었습니다. //eventTester(seeking); /Finding eventTester(timeupdate); //재생 시간 변경됨 eventTester(ended); //재생 종료됨 eventTester(ratechange) //재생 속도 변경됨 eventTester(durationchange); //리소스 길이 변경 eventTester(volumechange) //볼륨 변경

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