HTML5 비디오 및 자바 스크립트를 사용하여 사용자 정의 컨트롤이있는 비디오

비디오를 클릭하거나 div를 오버레이하여 재생/일시 중지 할 기본 컨트롤없이 HTML5 비디오 플레이어를 만들려고합니다. 기본 컨트롤을 완전히 숨기고 싶습니다. 사용자가 동영상을 클릭하여 일시 중지/재생할 수 있기를 바랍니다. 이것이 가능한가? 나의 초기 전략은 내 play/pause 버튼의 역할을 할 투명 div를 요소 위에 오버레이하는 것이었다. 아래는 내가 시작한 HTML과 자바 스크립트이지만 약간의 도움이 필요합니다. 모두에게 감사드립니다!HTML5 비디오 및 자바 스크립트를 사용하여 사용자 정의 컨트롤이있는 비디오

<!-- Video --> 
<div style="height:980px;height:540px;"> 
    <div style="z-index:100;position:absolute;"> 
     <video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/Carousel_Still.png" audio="muted" autoplay="true"> 
      <source src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4"> 
     </video> 
    </div> 
    <div id="imgPoster" style="height:300px; width:300px; background-color:red; z-index:500;position:absolute;"></div> 
</div> 
<!-- end Video --> 




    <!-- JAVASCRIPT FOR VIDEO PLAYER --> 
<script type="text/javascript"> 
    var videoEl = $('#myVideo'); 
    playPauseBtn = $('#imgPoster'); 

    playPauseBtn.bind('click', function() { 
     if (videoEl.paused) { 
      videoEl.play(); 
     } else { 
      videoEl.pause(); 
     } 
    }); 

    videoEl.removeAttribute("controls"); 
</script> 
<!-- END JAVASCRIPT FOR VIDEO PLAYER -->

출처

2011-10-07 Chris G

div 오버레이가 필요하지 않을 수도 있습니다. 클릭 이벤트를 시작/일시 중지 할 수 있도록 동영상 요소 자체에 바인딩 할 수 있습니다. 도움이 필요한 것뿐만 아니라 도움이 필요한 것을 정확하게 지정하면 도움이 될 것입니다. 뭔가 작동하지 않습니까? 아니면 우리가 추측하기를 바라십니까? – adeneo

비디오 태그 이드 속성에 대한 필요가 없습니다, 단지 하나의 파일 형식을 사용하여 비디오와 포스터가 존재하지 않는로 연결하는 경우 필요가 별도의 소스 태그가 없습니다. 어쨌든

, 예를 아래 :

<video id="myVideo" width="980" height="540" poster="http://d3v.lavalobe.com/voicecarousel/images/myPoster.png" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/myVid.mp4" type="video/mp4"> 
</video> 

<script type="text/javascript"> 
    $("#myVideo").bind("click", function() { 
    var vid = $(this).get(0); 
     if (vid.paused) { 
      vid.play(); 
     } else { 
      vid.pause(); 
     } 
    }); 
</script>

편집 : 바이올린을 추가 : http://jsfiddle.net/SKfBY/

가 귀하의 사이트를 검토했다, 당신은 자세히 보면 비디오가 멋진 :-) 당신 ' 여기에 두 개의 jQuery 파일이 추가되었지만 실제로는 문제가 아니라는 것을 알 수 있습니다.하지만 두 번째 jQuery 파일 만 있으면 페이지로드가 느려집니다. 또한 문제가 아니지만 비디오 요소가 HTML5이기 때문에 아래 HTML5 doctype을 사용하는 것이 좋습니다. 그러나 대부분의 브라우저는 어쨌든 알아낼 것입니다. 이 문제는 내 잘못 인 것 같습니다. jsFiddle은 자동으로 $ document.ready 함수를 삽입하고, 내 예제에서 이것을 잊어 버렸습니다. 그것이 당신을 위해 작동하지 않는 이유입니다.

작성 방법에 대한 전체적인 요약은 jQuery의 두 인스턴스를 모두 제거하고 Google의 jQuery 버전으로 대체했습니다. 일반적으로 더 나은 옵션이며, 사용자가 제공하지 않은 스크립트도 제거해야합니다. 사이트가 데 sWFObject를 사용하는 플래시 파일을 포함하지 않는 경우 '는 t는 데 sWFObject를 제거처럼, 필요 등

<!DOCTYPE html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>Untitled Document</title> 

<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/style.css"/> 
<link rel="stylesheet" type="text/css" href="http://dev4.baytechlabs.com/Voice_Carousel/css/main/thickbox.css"/> 
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-yui.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/Pristina_400.font.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/MomsTypewriter_400.font.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/main/cufon-config.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/thickbox.js" type="text/javascript"></script> 
<script src="http://dev4.baytechlabs.com/Voice_Carousel/js/swfobject.js" type="text/javascript"></script> 
<script type="text/javascript" src="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.js"></script> 
<link href="http://dev4.baytechlabs.com/Voice_Carousel/js/facebox/facebox.css" media="screen" rel="stylesheet" type="text/css"/> 

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("#myVideo").bind("click", function() { 
     var vid = $(this).get(0); 
      if (vid.paused) { 
       vid.play(); 
      } else { 
       vid.pause(); 
      } 
     }); 
    }); 
</script> 
</head> 
<body> 
    <video id="myVideo" width="980" height="540" audio="muted" autoplay="true" src="http://d3v.lavalobe.com/voicecarousel/video/CarouselWBG_v3.mp4" type="video/mp4"> 
    </video> 
</body> 
</html>

출처

2011-10-07 03:57:36 adeneo

감사합니다 adeneo! 이것을 테스트하기 위해 "자동 재생"속성을 제거했지만 재생하거나 일시 중지하지는 않습니다 ... 당신에게 효과가 있습니까? –

JSFiddle 예제를 추가하여 Chrome 15에서 정상적으로 작동합니다. – adeneo

감사합니다. adeno, 전 정말 가까이에 있다고 생각합니다. 당신의 바이올린은 완벽하게 작동하는 것 같습니다. 나는 그것을 모방했지만 여전히 실패했다. 좀 봐 주시겠습니까? 감사합니다 adeno! http://d3v.lavalobe.com/voicecarousel/test.html –

이 코드는 나를 위해 작동 :

function vidplay() { 
var video = document.getElementById("video1"); 
var button = document.getElementById("play"); 
if (video.paused) { 
video.play(); 
button.textContent = "||"; 
} else { 
video.pause(); 
button.textContent = ">"; 
} 
} 

function restart() { 
var video = document.getElementById("video1"); 
video.currentTime = 0; 
} 

function skip(value) { 
var video = document.getElementById("video1"); 
video.currentTime += value; 
}

그러나 0으로 시간을 설정은 비디오를 되감기 ; 재생 안함. 그래서 되감기 후 재생할 수있는 비디오를 원했고,이 함께했다 :

<div id="buttonbar"> 
<button id="restart" onclick="restart();">[]</button> 
<button id="rew" onclick="skip(-10)">&lt;&lt;</button> 
<button id="play" onclick="vidplay()">&gt;</button> 
<button id="fastFwd" onclick="skip(10)">&gt;&gt;</button> 
</div>

내 두 센트의 가치가 ...

환호

: 여기

function restart() { 
var video = document.getElementById("video1"); 
var button = document.getElementById("play"); 
if (video.paused) { 
} 
else { 
video.pause(); 
} 
video.currentTime = 0; 
video.play(); 
button.textContent = "||"; 
}

는 버튼입니다

출처

2012-12-24 06:44:29

HTML5 비디오 및 자바 스크립트를 사용하여 사용자 정의 컨트롤이있는 비디오

답변

관련 문제