도움말! 나는 video.js에 대한 내 코드로이 문제를 파악하기 위해 3 일을 보냈다! 도와주세요! 그래, VLC에서 잘 재생되는 ~ 10MB의 MP4 비디오가 있습니다. 이 jpeg를 처리하기 위해 video.js를 사용하는 jquery를 사용하여 웹 사이트를 구축하고 있습니다. video.min.js, video-js.min.css 및 jquery-3.1.1.min.js에 액세스하기위한 헤더 태그가 있습니다. 나는 몸 태그의 UL 태그에 DIV 태그에 리튬 태그의 HTML5 비디오 태그를 포장 :video.js를 사용하여 버튼을 사용하여 html5에서 비디오를 재생합니다. 메가 문제
<div class="cast">
<li><video id="T2Scast" class="video-js vjs-default-skin" preload="auto" data-setup="{}">
<source src="test.mp4" type="video/mp4">
<source src="test.webm" type="video/webm">
</video></li>
</div>
참고, 내가 태그의 '컨트롤'항목을 제거했습니다. 나는 크기, 불투명도 및 z- 색인에 대한 CSS 항목으로이 비디오의 스타일을 지정했습니다. 아래의 비디오 위에 명확한 일부 영역이있는 .png 템플릿을 오버레이합니다. 나는 또 다른 버튼을 만들었고 .png 그리고 img ID = "btn"태그를 사용하여 맨 위에 가장 높은 CSS Z- 인덱스를 추가했습니다.
<li><img class="corner" id="btn" src="corner.png" /></li>
그럼 다른 main.js 파일에서이를 제어하는 코드가 있습니다. 내가 시도한 두 가지 유사 콘텐츠가 있으며 두 번째는 MEGA 문제가 있습니다. 첫 번째 스 니펫은 로컬 파일이있는 노트북/데스크톱에서만 작동하며 일종의 '자동 재생'입니다 (video.js 태그의 자동 재생은 노트북/데스크톱에서만 정상적으로 작동하며 html5에서 삭제하면이 jq가 사용됩니다 교체는 노트북/데스크탑으로 만)에 잘 재생 :
var $vde = $("#T2Scast");
$vde.on("canplaythrough", function() {
\t TweenLite.to($vde, .5, {autoAlpha:1})
\t this.play();
\t $vde.on("ended", function(){
\t TweenLite.to($vde, .5, {autoAlpha:0})
\t })
});2 난이 시도 :
는var $vde = $("#T2Scast");
var $vdeBTN = $("#btn");
$vdeBTN.on("click", function() {
\t TweenLite.to($vde, .5, {autoAlpha:1})
\t
\t videojs("#T2Scast").src({type: "video/mp4", src: "test.mp4"});
/*ALTERNATIVELY I HAVE TRIED VARIATIONS OF this.play();
or using jq to set the html5 tag to some variation of
"autoplay":true in the DOM or referencing videojs() or
setting up other vars... and many, many more totally
unresponsive snippets of code... ARRRGH!*/
\t $vde.on("ended", function(){
\t TweenLite.to($vde, .5, {autoAlpha:0})
\t });
});이 나를 위해 매우 실망이다. CSS 불투명도 = 1로 설정하면 동영상의 첫 번째 프레임의 정지 프레임을 볼 수 있습니다. 불투명도를 0으로 설정하면 트위닝되어 여전히 동일한 고정 프레임을 표시합니다. 내가 도대체 뭘 잘못하고있는 겁니까? 어딘가에 .png가 떠 다니고 eventListener 'click'을 첨부하고 해당 이벤트를 비디오로 전달할 수없는 이유는 무엇입니까? 동영상 위에 레이어가있는 이미지가있는 경우 동영상 재생 컨트롤이나 해당 레이어 아래의 버튼을 사용할 수 없으므로 내 버튼을 최상위 Z 색인에 추가하는 이유입니다. 잃어버린.
[PS 나중에 자동 재생으로 케이스 # 1을 사용하여 서버에 업로드 한 후 오디오가 재생되는 이유에 대해 다음 질문을하겠습니다. 나는 그것이 잘못된 유형이지만, [더 좌절] ... 그 다른 스레드에 대한 또 다른 질문입니다 있는지 확인하기 위해 불을 지르고와 MIME을 감지하기 위해 노력 해왔다 여기서
전체 사이트이다. http://www.et-ent.comBTW, 위의 경우 # 2의 기능을 업로드하고 웹 (트위닝에서 고정 된 프레임으로 재생중인 동영상 ...)에서 내 브라우저에서 열면 작동하지 않는다고 추가해야합니다. 로컬 폴더에서 내 바탕 화면에서 작동하여 고정 된 프레임이 재생되는 비디오를 표시합니다 ... 아야.
* 끝 트윈이 잘 작동하고 첫 번째 트윈이 우회됩니다. * 두 번째 것이 첫 번째를 덮어 쓰고 있다고 생각합니다 (참고). – zer00ne
데스크톱/노트북에서 작동한다고 말하면 모바일에서 작동하고 싶다고 생각합니까? – zer00ne
주로 노트북을 사용하여 웹에서 찾아 볼 때 작동하지 않습니다. 나는 btn click eventListener가 작동하지 않는 이유를 설명 할 필요가있다. 그러나 결국 나는 휴대폰 기능을 얻을 필요가있다. 나는 그것이 또 다른 문제, '탭'이벤트 리스너와 관련이 있다고 가정합니다. – coderJoker