Safari, iPhone 및 iPad에서 HTML5 비디오 태그가 작동하지 않음

developer tip

Safari, iPhone 및 iPad에서 HTML5 비디오 태그가 작동하지 않음

copycodes 2020. 10. 16. 07:34

Safari, iPhone 및 iPad에서 HTML5 비디오 태그가 작동하지 않음

나는 13s와 같은 작은 비디오가있는 html5 웹 페이지를 만들려고합니다.이 비디오의 플래시 버전을 3 형식으로 변환했습니다 .fireFogg를 사용하는 .ogv, firefogg를 사용하는 .webm 및 HandBrake 응용 프로그램을 사용하는 .mp4 html 스크립트 내 페이지에서 사용했습니다.

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

동영상이 Chrome 및 FireFox에서 제대로 작동하지만 데스크톱의 Safari 나 iPhone 또는 iPad에서 전혀 작동하지 않습니다. 출력은 단순히 동영상 태그의 컨트롤을 표시하는 빈 페이지이지만 아무것도로드되지 않습니다.

내가 가지고있는 Safari 버전은 HTML5 비디오를 지원합니다.

iPhone 및 iPad와 같은 Apple 장치에서 동일한 문제가 발생하여 저전력 모드를 끄고 작동했으며 다음과 `playsinline`같이 비디오 태그에 속성을 포함해야 합니다.

<video class="video-background" autoplay loop muted playsinline>

를 포함하는 경우에만했다 playsinline.

향후 검색자를위한 또 다른 가능한 해결책 : (문제가 MIME 유형 문제가 아닌 경우)

어떤 이유로 controls = "true"플래그를 설정하지 않으면 iPad에서 비디오가 재생되지 않습니다.

예 : 이것은 iPhone에서는 작동했지만 iPad에서는 작동하지 않았습니다.

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

그리고 이것은 이제 iPad와 iPhone 모두에서 작동합니다.

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

웹 서버가 HTTP 바이트 범위 요청을 지원하지 않을 수 있습니다. 이것이 제가 사용중인 웹 서버의 경우이며 그 결과 비디오 위젯이로드되고 재생 버튼이 표시되지만 버튼을 클릭해도 효과가 없습니다. — 동영상은 FF 및 Chrome에서 작동하지만 iPhone 또는 iPad에서는 작동하지 않습니다.

여기 mobiforge.com에서 바이트 범위 요청에 대한 자세한 내용 은 부록 A : Apple iPhone 용 스트리밍을 참조하십시오 .

첫째, Safari 웹 브라우저는 콘텐츠를 요청하고 오디오 또는 비디오 파일 인 경우 미디어 플레이어를 엽니 다. 그런 다음 미디어 플레이어는 웹 서버가 바이트 범위 요청을 지원하는지 확인하기 위해 콘텐츠의 처음 2 바이트를 요청합니다. 그런 다음이를 지원하는 경우 iPhone의 미디어 플레이어는 나머지 콘텐츠를 바이트 범위로 요청하고 재생합니다.

웹에서 "iphone mp4 byte-range"를 검색 할 수 있습니다.

비디오가 세션 기반 로그인 시스템으로 보호되는 경우 Safari는 비디오를로드하지 못합니다. 이는 Safari가 비디오에 대한 초기 요청을 한 다음 작업을 QuickTime에 넘겨 다른 요청을하기 때문입니다. Safari는 세션 정보를 보유하고 있으므로 인증을 통과하지만 QuickTime은 그렇지 않습니다.

서버 접근 로그를 보면 처음에는 Safari에서 요청한 다음 QuickTime에서 요청한 것을 볼 수 있습니다. 다른 브라우저는 브라우저 자체에서 단일 요청을합니다.

이것이 문제인 경우 임시 토큰을 사용하거나 원래 요청에서 제한된 시간 액세스를 사용하도록 비디오 액세스를 다시 작업해야 할 수 있습니다. 보다 직접적인 해결책을 찾으면이 답변을 업데이트하겠습니다.

미래 검색의 경우뿐만 아니라, 내가 사용하는 핸드 브레이크로 다운 스케일 있다는 MP4 파일이 있었다 handbrake-gtk에서 apt-get예를 sudo apt-get install handbrake-gtk. Ubuntu 14.04에서 handbrake저장소는 기본적 으로 MP4에 대한 지원을 포함하지 않습니다. 기본 설정을 그대로두고 오디오 트랙을 제거하면 * .M4V 파일이 생성됩니다. 궁금한 사람들을 위해 동일한 컨테이너이지만 M4V는 주로 iOS에서 iTunes에서 열 때 사용됩니다.

이것은 Safari를 제외한 모든 브라우저에서 작동했습니다.

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

나는 사이의 마임 타입을 변경 video/mp4하고 video/m4v영향을 미치지 않고. 나는 또한 control속성 추가를 테스트했지만 다시 효과가 없었습니다.

이것은 Mavericks의 Safari 7과 Yosemite의 Safari 8을 포함하여 테스트 된 모든 브라우저에서 작동했습니다. 동일한 m4v 파일 (HTML이 아닌 실제 파일)의 이름을 mp4로 변경하고 CDN에 다시 업로드했습니다.

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Safari는 실제로 MP4라는 이름을 완전히 기대하고 있다고 생각합니다. 파일과 MIME 유형의 다른 조합은 나를 위해 일하지 않았습니다. 소스 목록이 기술적으로 지원되는 첫 번째 소스를 선택해야한다고 확신하지만 다른 브라우저, 특히 Chrome이 먼저 WEBM 파일을 선택한다고 생각합니다.

그러나 이것은 iOS 장치의 비디오 문제를 해결하지 못했습니다 (iPad 3 "새로운 iPad"및 iPhone 6 테스트 됨).

Safari는 HTML5 비디오를 지원하지만이 기능이 작동하려면 Quicktime Player를 설치해야합니다. HTML5 비디오를 사용하는 내가 만든 사이트에서 사용자는 Safari를 사용할 때 Quicktime이 설치되어 있어야한다는 경고가 표시됩니다. 그렇지 않으면 비디오 대본 만 볼 수 있습니다. 도움이 되었기를 바랍니다.

muted속성을 추가하면 모든 것이 잘 작동합니다.

이 답변의 출처는 https://webkit.org/blog/6784/new-video-policies-for-ios/입니다.

기본적으로 WebKit에는 다음 정책이 있습니다.

<video autoplay> 이제 요소는 다음 조건을 충족하는 요소에 대해 autoplay 속성을 따릅니다.

<video> 소스 미디어에 오디오 트랙이없는 경우 요소가 사용자 제스처없이 자동 재생되도록 허용됩니다.

<video muted> 요소는 사용자 제스처없이 자동 재생 될 수도 있습니다.

경우 <video>요소는 오디오 트랙을 얻거나 음소거가 사용자의 제스처없이되고, 재생이 일시 중지됩니다.

<video autoplay> 요소는 뷰포트로 스크롤되고 CSS를 통해 표시되고 DOM에 삽입 될 때와 같이 화면에 표시 될 때만 재생을 시작합니다.

<video autoplay> 요소가 표시되지 않는 경우 (예 : 뷰포트 밖으로 스크롤되는 등) 일시 중지됩니다.

<video> 요소는 이제 다음 조건을 충족하는 요소에 대해 play () 메서드를 따릅니다.

<video> 소스 미디어에 오디오 트랙이 없거나 muted 속성이 true로 설정된 경우 요소는 사용자 제스처없이 play () 할 수 있습니다.

경우 <video>요소는 오디오 트랙을 얻거나 음소거가 사용자의 제스처없이되고, 재생이 일시 중지됩니다.

<video> 요소는 화면에 표시되지 않거나 뷰포트 밖에있을 때 play () 할 수 있습니다.

video.play ()는 이러한 조건 중 하나라도 충족되지 않으면 거부되는 Promise를 반환합니다.

<video playsinline>이제 iPhone에서 요소가 인라인으로 재생 될 수 있으며 재생이 시작될 때 자동으로 전체 화면 모드로 전환되지 않습니다. <video>playsinline 속성이없는 요소는 iPhone에서 재생하려면 계속 전체 화면 모드가 필요합니다. 핀치 제스처로 전체 화면을 종료 할 때 <video>playsinline이없는 요소는 계속해서 인라인으로 재생됩니다.

신뢰할 수없는 '개발'SSL 인증서와 관련하여 이상한 문제를 보았습니다. 모바일 Safari는 페이지를 만족스럽게 제공하지만 인증서를 수락 했더라도 '가짜'SSL 인증서에 대한 동영상 제공을 거부합니다.

테스트하려면 비디오를 다른 곳에 배포하거나 http (전체 페이지)로 전환하면 재생됩니다.

동영상이 음소거 되어도 괜찮다면 'playsinline'을 추가하면 Iphone과 Ipa에서 작동합니다.

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

비디오 음소거를 원하지 않지만 여전히 자동 재생을 원하는 경우 js : 음소거 된 소품으로 html5 비디오 음소거 해제 방법을 사용하여 음소거 된 속성을 제거 할 수 있습니다.

.mp4의 경우 작동합니다 (사파리 모바일 및 데스크톱).

<video height="250" width="250" controls>
    <source src="video.mp4" type="video/mp4" />
    Your browser does not support the video tag.
</video>

controls=”true”애플은 그 자체 만 사용 컨트롤을 말한다 같은 위의 포스트에서 언급 한 나에게 아무 sence하지 않습니다.

참조 : “HTML5 오디오 또는 비디오를 사용하려면 먼저 또는 요소를 만들고 미디어의 소스 URL을 지정하고 controls 속성을 포함합니다. <video src="http://example.com/path/mymovie.mp4" controls></video>”

출처 : https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

내 거래에서 (작은 여담) : iPhone에서 비디오를 업로드하면 .quicktime으로 서버에 전송된다는 것을 발견했습니다. 아이러니하게도 이것은 사파리의 서버에서 비디오를 재생하려고 할 때의 문제입니다. (모바일 및 데스크톱).

따라서 (나와 같은) safari에서 .quicktime (또는 .mp4 이외의 다른 것) 문제가 발생하는 경우 다음은 apple에서 제공하는 해결 방법입니다. 아직 직접 테스트하지 않았으며 한 눈에보기에 만족스럽지 않고 더 많은 정보를 제공 할뿐입니다.

참조 : “QuickTime 플러그인으로 대체 거의 모든 브라우저에서 작동하는 QuickTime 플러그인으로 대체하는 간단한 방법이 있습니다. HTML Video Example에서 Apple에서 제공하는 미리 빌드 된 JavaScript 파일 인 ac_quicktime.js를 다운로드하고 HTML 헤드에 다음 코드 줄을 삽입하여 웹 페이지에 포함합니다. <script src="ac_quicktime.js" type="text/javascript"></script>”

출처 : https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

업데이트 : .quicktime 이름을 .mov서버 에 이전 업로드로 변경하려면 (base64 파일 유형 "data : video / mov;") ac_quicktime.js를 건너 뜁니다. . . 그런 다음 html 비디오 태그에서 작동합니다. 해커 디 해킹.

iOS 6.1부터는 더 이상 iPad에서 동영상을 자동 재생하는 것이 불가능합니다. Apple 설명서에 따르면 iPad를 포함한 모든 iOS 장치의 Safari에서 자동 실행 기능이 작동하지 않습니다.

"Apple은 스크립트 및 속성 구현을 통해 iOS 장치에서 비디오 자동 재생을 비활성화하기로 결정했습니다.

Safari, iOS (iPad를 포함한 모든 장치)에서 사용자가 셀룰러 네트워크에 있고 데이터 단위당 요금이 부과 될 수있는 경우 사전로드 및 자동 재생이 비활성화됩니다. 사용자가 시작할 때까지 데이터가로드되지 않습니다. "

이 Apple 문서 에서 더 많은 것을 읽을 수 있습니다.

이 코드를 사용하면 ios 장치와 함께 safari의 모든 브라우저에서 비디오가 재생됩니다 ... 모두를 위해 이동하십시오 (나는 이것을 사용하고 잘 작동합니다)

`

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
    	<source src="video/video.mp4" type="video/mp4"></source>
		<source src="video/video.webm" type="video/webm"></source>
		<source src="video/video.mov" type="video/mov"></source>
</video>

For IOS, please use only mp4 source file. I have observed one issue in latest safari browser that safari browser cant able to detect source file correctly and because of this, video autoplay doesn't work.

Lets check below example -

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

As I have used mp4, webm in source files. Safari deosnt support webm but still in latest safari version, it would select webm and it fails video autoplay.

So to work autoplay across supported browser, I would suggest to check browser first and based on that you should generate your html.

So for safari, use below html.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

For other than safari,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

is working but MacOs recently has autoplay policy for user: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/, I resolved the same issue using a button to enable sound:

ejm:

<video autoplay loop muted id="myVideo">
  <source src="amazon.mp4" type="video/mp4">
  Sorry, your browser doesn't support embedded videos...
</video>

<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>

<script>
var vid = document.getElementById("myVideo");
function disableMute() { 
  vid.muted = false;
}
</script>

I have faced same issue. Because my video frame size was too big. ie.2248 px apple support H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile. check this for more info

I had this problem where .mp4 playback in Safari didn't work, but in other browsers it was fine. The error that I was seeing in the console was: error media src not supported. In my case this turned out to be a MIME type issue, but not because it wasn't declared as MIME type in IIS, rather that it was declared twice (once in IIS and also in a web.config file). I found this out by trying to download the .mp4 file locally on the server. I removed the config file from the location of the content I was trying to play and it fixed the issue. I could have just deleted the MIME type from the web.config file, but in this case the web.config file wasn't needed.

What helped in my case was dropping the audio track. It was silent before, but it had to be gone completely.

On ubuntu:

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

And safari/desktop start to play the video

I had same problem - make sure the url for video asset is coming from secure domain. Our dev environment is http while production is secure. Due to the video being referenced via relative path, it wasn't working on development. Seems to be an issue that apple requires video to be secure...

I had a similar issue where videos inside a <video> tag only played on Chrome and Firefox but not Safari. Here is what I did to fix it...

A weird trick I found was to have two different references to your video, one in a <video> tag for Chrome and Firefox, and the other in an <img> tag for Safari. Fun fact, videos do actually play in an <img> tag on Safari. After this, write a simple script to hide one or the other when a certain browser is in use. So for example:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

This also helps solve the problem of a thin black frame/border on some videos on certain browsers where they are rendered incorrectly.

For my use case there were two things:

I wasn't using the new attribute / webkit's policy playsinline;
My video / mime-type or whathathell wasn't properly encoded, so I used this site to convert it to all formats I needed: https://pt.converterpoint.com/

참고URL : https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad

'developer tip' 카테고리의 다른 글

Python으로 웹 사이트에 로그인하려면 어떻게해야합니까? (0)	2020.10.16
고정 너비 파일을 효율적으로 구문 분석하는 방법은 무엇입니까? (0)	2020.10.16
"실수로"결정 기억을 클릭 한 후 IntelliJ의 새 창에서 프로젝트를 엽니 다. (0)	2020.10.16
Python에서 Excel 파일 읽기 (0)	2020.10.16
Swift에서 REST API 호출하기 (0)	2020.10.16

현재글Safari, iPhone 및 iPad에서 HTML5 비디오 태그가 작동하지 않음

copycodes

Safari, iPhone 및 iPad에서 HTML5 비디오 태그가 작동하지 않음

Safari, iPhone 및 iPad에서 HTML5 비디오 태그가 작동하지 않음

iPhone 및 iPad와 같은 Apple 장치에서 동일한 문제가 발생하여 저전력 모드를 끄고 작동했으며 다음과 `playsinline`같이 비디오 태그에 속성을 포함해야 합니다.

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

티스토리툴바

Safari, iPhone 및 iPad에서 HTML5 비디오 태그가 작동하지 않음

Safari, iPhone 및 iPad에서 HTML5 비디오 태그가 작동하지 않음

iPhone 및 iPad와 같은 Apple 장치에서 동일한 문제가 발생하여 저전력 모드를 끄고 작동했으며 다음과 playsinline같이 비디오 태그에 속성을 포함해야 합니다.

'developer tip' 카테고리의 다른 글

'developer tip'의 다른글

관련글

티스토리툴바

iPhone 및 iPad와 같은 Apple 장치에서 동일한 문제가 발생하여 저전력 모드를 끄고 작동했으며 다음과 `playsinline`같이 비디오 태그에 속성을 포함해야 합니다.