TypeError : 'HTMLMediaElement'에서 '재생'을 실행하지 못했습니다. 잘못된 호출

간단한 문제입니다.TypeError : 'HTMLMediaElement'에서 '재생'을 실행하지 못했습니다. 잘못된 호출

HTMLMediaElement 메서드를 변수에 할당하려고합니다.

// html part 
<video id="player" ... /> 

// js part 
const video = document.querySelector('#player') 
const play = video.play 

video.play() // works! 

play() // error! 

Uncaught (in promise) TypeError: Failed to execute 'play' on 'HTMLMediaElement': Illegal invocation

누구나이 오류의 원인을 알 수 있습니까?

출처

2017-05-22 WendellLiu

: 바인딩을 사용하여 "나중에 저장"

const video = document.querySelector('#video'); play = video.play; play.call(video);

<video id="video" src="http://vjs.zencdn.net/v/oceans.mp4" controls>

또는 :

다음을 사용하여 호출 할 수 있습니다 'this'를'video'에 묶으시겠습니까? --- 네, 바인딩이 작동합니다.'play = play.bind (video)' – evolutionxbox

이 질문은 복제본처럼 느껴지지만 속임수 대상을 찾을 수 없습니다. – evolutionxbox

이전 질문을 찾을 수없는 경우. 답변 블록에 답변을 게시 할 수 있습니다. – WendellLiu

네이티브 DOM 구현 HTMLMediaElement.play은 this이 HTMLMediaElement에 바인딩되어야합니다.

video.play()은 this 값이 video에 바인딩되어 있기 때문에 작동합니다. 값이 다른 값 (이제 window?)에 바인딩되어 있기 때문에 play()이 작동하지 않습니다. 난 당신이 필요하다고 생각

const video = document.querySelector('#video'); 
 
play = video.play.bind(video); 
 

 
play();

<video id="video" src="http://vjs.zencdn.net/v/oceans.mp4" controls>

출처

2017-05-22 10:11:03 evolutionxbox

'this '의 값이'video'에 묶이지 않고'play'가 호출 될 때 무엇인지에 관해서이 답변을 주석 달고 편집 해 주신 분께 감사드립니다. – evolutionxbox

TypeError : 'HTMLMediaElement'에서 '재생'을 실행하지 못했습니다. 잘못된 호출

답변

관련 문제