Safari 및 Chrome 데스크톱 브라우저에서 동영상 자동 재생이 작동하지 않습니다.
비디오가 여기에 포함 된 이유를 알아 내기 위해 많은 시간을 보냈습니다.
<video height="256" loop autoplay muted controls id="vid">
<source type="video/mp4" src="video_file.mp4"></source>
<source type="video/ogg" src="video_file.ogg"></source>
</video>
페이지가 FireFox에로드되면 자동으로 재생을 시작하지만 Webkit 기반 브라우저에서는 자동 재생을 수행 할 수 없습니다. 이것은 일부 무작위 페이지에서만 발생했습니다. 지금까지 원인을 찾을 수 없었습니다. 닫히지 않은 태그 또는 CMS 편집기가 만든 광범위한 JS가 의심됩니다.
내가 얻을 수있는 가장 좋은 해결책은이 코드를 </video>
<script>
document.getElementById('vid').play();
</script>
... 예쁘지는 않지만 어떻게 든 작동합니다.
업데이트 최근 많은 브라우저에서 사운드가 꺼진 상태에서만 비디오를 자동 재생할 수 있으므로 muted비디오 태그에도 속성을 추가해야합니다.
<video autoplay muted>
...
</video>
play()다른 답변에서 제안한대로 jQuery 또는 DOM 조작을 사용한 후에도 Android 용 Chrome (버전 56.0)에서 여전히 작동하지 않았습니다 (동영상이 자동 재생되지 않음).
developers.google.com 의이 게시물 에 따라 Chrome 53 에서 동영상이 음소거 된 경우 브라우저에서 자동 재생 옵션 이 적용됩니다 .
따라서 autoplay muted동영상 태그에 속성을 사용 하면 버전 53부터 Chrome 브라우저에서 동영상이 자동 재생 될 수 있습니다.
위 링크에서 발췌 :
두 경우 비디오 음소거 자동 재생은보기에 와서 한 번 재생 비디오 요소에 대해 자동으로 시작됩니다 버전 (53)의 안드로이드에 대한 크롬에서 지원
autoplay하고이muted설정되어 [...]<video autoplay muted> <source src="video.webm" type="video/webm" /> <source src="video.mp4" type="video/mp4" /> </video>
- 음소거 된 자동 재생은 iOS 10 이상의 Safari에서 지원됩니다.
- 음소거 여부에 관계없이 자동 재생은 Firefox 및 UC 브라우저의 Android에서 이미 지원됩니다. 자동 재생을 차단하지 않습니다.
데스크톱의 Safari 및 Chrome은 비디오 태그 주변의 DOM 조작을 좋아하지 않습니다. 초기 페이지로드 후 동영상 태그 주변의 DOM이 변경된 경우 canplaythrough 이벤트가 실행 된 경우 에도 autoplay 속성이 설정된 경우 재생 순서를 실행하지 않습니다 . 기본적으로 비디오 태그 주변에서 .wrap () jQuery를 삭제하고 그 후 예상대로 자동 재생 될 때까지 동일한 문제가 발생했습니다.
나에게 문제는 태그 muted내에 속성을 추가해야한다는 것이 었습니다 video. 즉 :
<video width="1920" height="1980" src="video/Night.mp4"
type="video/mp4" frameborder="0" allowfullscreen autoplay loop
muted></video>`
Google은 자동 재생 동영상에 대한 정책을 변경했습니다.
muted
그래서 그냥 음소거 추가
<video height="256" loop="true" autoplay="autoplay" controls="controls" id="vid" muted>
<source type="video/mp4" src="video_file.mp4"></source>
<source type="video/ogg" src="video_file.ogg"></source>
</video>
이제 비디오에서 동일한 문제가 발생했습니다.
<video preload="none" autoplay="autoplay" loop="loop">
<source src="Home_Teaser.mp4" type="video/mp4">
<source src="Home_Teaser" type="video/webm">
<source src="Home_Teaser.ogv" type="video/ogg">
</video>
검색 후 해결책을 찾았습니다.
"preload"속성을 "true"로 설정하면 비디오가 정상적으로 시작됩니다.
Adding the below code at the bottom of the page worked for me . I dont know why it works :(
setTimeout(function(){
document.getElementById('vid').play();
},1000);
Try this:
<video width="320" height="240" autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>
None of the other answers worked for me. My workaround was to trigger a click on the video itself; hacky (because of the timeout that is needed) but it works fine:
function startVideoIfNotStarted () {
$(".id_of_video_tag").ready(function () {
window.setTimeout(function(){
videojs("id_of_video_tag").play()
}, 1000);
});
}
$(startVideoIfNotStarted);
var video = document.querySelector('video'); video.muted = true; video.play()
Only this solution helped me, <video autoplay muted ...>...</video> didn't work...
This is because of now chrome is preventing auto play in html5 video, so by default they will not allow auto play. so we can change this settings using chrome flag settings. this is not possible for normal case so i have find another solution. this is working perfect... (add preload="auto")
<video autoplay preload="auto" loop="loop" muted="muted" id="videoBanner" class="videoBanner">
<source src="banner-video.webm" type="video/webm">
<source src="banner-video.mp4" type="video/mp4">
<source src="banner-video.ogg" type="video/ogg">
var herovide = document.getElementById('videoBanner');
herovide.autoplay=true;
herovide.load();
We recently addressed a similar issue with an embedded video and found that the autoplay and muted attributes were not sufficient for our implementation.
We added a third "playsinline" attribute to the code and it fixed the issue for iOS users.
This fix is specific to videos that are to be played inline. From https://webkit.org/blog/6784/new-video-policies-for-ios/ :
On iPhone, elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins. elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone. When exiting fullscreen with a pinch gesture, elements without playsinline will continue to play inline.
Chrome does not allow to auto play video with sound on, so make sure to add muted attribute to the video tag like this
<video width="320" height="240" autoplay muted>
<source src="video.mp4" type="video/mp4">
</video>
Try this:
<video height="256" loop autoplay controls id="vid">
<source type="video/mp4" src="video_file.mp4"></source>
<source type="video/ogg" src="video_file.ogg"></source>
This is how I normally do it. loop, controls and autoplay do not require a value they are boolean attributes.
Spent two hours trying all solutions mentioned above.
This is what finally worked for me:
var vid = document.getElementById("myVideo");
vid.muted = true;
I had a case where it had something to do with the order of the different filetypes. Try to change it and see if that helps.
I started out with playing all the visible videos, but old phones weren't performing well. So right now I play the one video that's closest to the center of the window and pause the rest. Vanilla JS. You can pick which algorithm you prefer.
//slowLooper(playAllVisibleVideos);
slowLooper(playVideoClosestToCenter);
function isVideoPlaying(elem) {
if (elem.paused || elem.ended || elem.readyState < 2) {
return false;
} else {
return true;
}
}
function isScrolledIntoView(el) {
var elementTop = el.getBoundingClientRect().top;
var elementBottom = el.getBoundingClientRect().bottom;
var isVisible = elementTop < window.innerHeight && elementBottom >= 0;
return isVisible;
}
function playVideoClosestToCenter() {
var vids = document.querySelectorAll('video');
var smallestDistance = null;
var smallestDistanceI = null;
for (var i = 0; i < vids.length; i++) {
var el = vids[i];
var elementTop = el.getBoundingClientRect().top;
var elementBottom = el.getBoundingClientRect().bottom;
var elementCenter = (elementBottom + elementTop) / 2.0;
var windowCenter = window.innerHeight / 2.0;
var distance = Math.abs(windowCenter - elementCenter);
if (smallestDistance === null || distance < smallestDistance) {
smallestDistance = distance;
smallestDistanceI = i;
}
}
if (smallestDistanceI !== null) {
vids[smallestDistanceI].play();
for (var i = 0; i < vids.length; i++) {
if (i !== smallestDistanceI) {
vids[i].pause();
}
}
}
}
function playAllVisibleVideos(timestamp) {
// This fixes autoplay for safari
var vids = document.querySelectorAll('video');
for (var i = 0; i < vids.length; i++) {
if (isVideoPlaying(vids[i]) && !isScrolledIntoView(vids[i])) {
vids[i].pause();
}
if (!isVideoPlaying(vids[i]) && isScrolledIntoView(vids[i])) {
vids[i].play();
}
}
}
function slowLooper(cb) {
// Throttling requestAnimationFrame to a few fps so we don't waste cpu on this
// We could have listened to scroll+resize+load events which move elements
// but that would have been more complicated.
function repeats() {
cb();
setTimeout(function() {
window.requestAnimationFrame(repeats);
}, 200);
}
repeats();
}
I solved the same problem with,
$(window).on('pageshow',function(){
var vids = document.querySelectorAll('video');
for (var i = 0; i < vids.length;){
vids[i].play();
}
})
You have to launch the videos after the page has been shown.
'Programming' 카테고리의 다른 글
| 드롭 다운을 사용하는 경우 SQL 주입을 방지해야합니까? (0) | 2020.08.25 |
|---|---|
| 인수가있는 PHP array_filter (0) | 2020.08.25 |
| 코드 골프-파이 데이 (0) | 2020.08.25 |
| 포드 설치 오류 (0) | 2020.08.25 |
| 이 1988 C 코드의 문제점은 무엇입니까? (0) | 2020.08.25 |