<video> 체크 박스와 버튼으로

src를 업데이트 함 저는 자바 스크립트에서 비디오 플레이어 구현에 비교적 간단한 문제가 있다고 생각합니다. 시작하려면 배열에 문자열을 추가하고 첫 번째 문자열 항목을 내 소스의 src로 내 비디오 태그에서 참조하고 싶습니다. 그런 다음 src가 수신되면 비디오가 재생되기를 원합니다.<video> 체크 박스와 버튼으로

저는 아직 전을 지나치지 않았기 때문에 후자에 대한 코드를 구현하지 않았습니다. 사람들이 src를 변경 한 후 .load() 함수 호출을 참조하는 것을 보았습니다. 그러나 src가 정확하게 시작하도록 설정했는지는 알 수 없습니다.

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Untitled Document</title> 

<style> 

video 
{ 
    background-color:#333; 
} 

</style> 

</head> 

<body> 

<script type="text/javascript"> 
var width = (1280 * 0.1); 
var height = (720 * 0.1); 
var resized = false; 

function getWidth(){ 
    return width; 
} 

function getHeight(){ 
    return height; 
} 


//Create array. Checkbox adds video to list. 
//"Submit" button gives first video in list to player. 

var videoList = new Array(); 
var i = 0; //incrementer 

//Use checkbox's value as argument 
function addVideo(value){ 
    videoList[i] = value; 
    i++; 
} 

function videoSubmit(){ 
    document.getElementById("player").setAttribute("src", videoList[i]); 
} 

</script> 

<video id="test" width="getWidth()" height="getHeight()"> 
<source id="player" src="null" type="video/avi" width="getWidth()"  height="getHeight()"/> 

</video> 
<br/> 

<form id="selector" action=""> 
<input type="checkbox" name="firstvideo" value="test.avi" onClick="addVideo(test.avi)"/> sample 1.avi<br/> 

</form> 

<button onClick="videoSubmit()"> Submit</button> 


</body> 
</html>

나는 자바 스크립트에 상당히 익숙하며 여전히 내 머리를 감싸고있다. 도움이되는 정보는 크게 감사드립니다.

출처

2012-06-21 akappel

i은 (는) 잘못된 값을 가지고 있습니다. 시도해보십시오.

function videoSubmit(){ 
    document.getElementById("player").setAttribute("src", videoList[ i - 1 ]); 
}

몇 가지 다른 문제가 있습니다. 여기에 고정 된 버전입니다 - 즐길 : 당신은 프로그래밍 방식으로 이러한 속성을 설정하려면

<video id="test" width="getWidth()" height="getHeight()">

, 당신이 그것을 수행해야합니다

http://jsfiddle.net/mrSYC/

는 또 다른 문제 :

당신은이 작업을 수행 할 수 없습니다 src 속성을 사용하는 것과 같은 방법입니다. 때때로 당신은 구조의이 종류를 볼 수 있습니다,하지만 서투른 : 질문에 관련없는

<script>document.write('<video id="test" width="' + getWidth() + '" ...')</script>

을 - 당신이 JQuery와 바로 뛰어 자바 스크립트 학습 많은 고통을 건너 뛸 수 있습니다. 페이지로드 패널티가 발생하지만 순수 자바 스크립트의 성가심을 해결합니다. 구식 방식을 사용하면 "귀중한 경험"을 얻을 수 있습니다. 가치있는 경험은 가치있는 것 이상입니다.

http://jquery.com/

출처

2012-06-21 14:32:29 Julian

변경 사항이 도움이되지 않았지만 jquery에 대한 참조를 가져 주셔서 감사합니다. 확실히 그것을 확인합니다. – akappel

나는 너를 위해 그것을 고쳤다 - jsfiddle를 조사해라. .. – Julian

현재 추가 source 요소를 필요로하지 않고 단순히 video 요소의 src 속성을 타겟팅 할 수 있습니다.

그래서 같은 :

document.getElementById('test').src = videoList[i];

은 (videoList[i]의 값이 비디오 파일에 문제의 브라우저가 재생할 수있는 유효한 URL이 있다고 가정) 할 필요해야한다.

출처

2012-06-21 16:31:55

<video> 체크 박스와 버튼으로

답변

관련 문제