使用按钮通过video.js在html5中播放视频; MEGA问题

帮助！我花了3天的时间试图用video.js的代码来解决这个问题！请帮忙！好的，我有一个~10mb的mp4视频，在VLC中播放很好。我正在使用jquery构建一个使用video.js处理这个mp4的网站。我有标题标签来访问video.min.js，video-js.min.css和jquery-3.1.1.min.js。我裹着李标签HTML5视频标签的DIV标签在体内标签的UL标签：使用按钮通过video.js在html5中播放视频; MEGA问题

<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>

注意，我删除了标签的“控制”条目。我使用css条目为大小，不透明度和z-index指定了此视频。我在底下的视频上覆盖了一个带有一些清晰区域的.png模板。我做了另一个按钮.png，并将最高css z-index与img ID =“btn”标签放在一起。

<li><img class="corner" id="btn" src="corner.png" /></li>

然后我有代码来控制这在另一个main.js文件。我已经尝试了两个变体，第二个变体是MEGA问题。第一个片段只能在带有本地文件的笔记本电脑/台式机上运行，并且是一种“自动播放”（video.js标记的自动播放功能仅适用于笔记本电脑/台式机;当我从html5中删除它并使用此jq替代它起着笔记本/台式ONLY）精细：

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 }) 
 
});

年底补工作正常，第一吐温被绕过[原因]我不在乎，因为这不是我想要的......但是，我知道我至少在用于Firefox和Chrome的笔记本电脑/台式机上具有这种功能。

第二我已经试过这样：

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-index处。丢失。

[PS后来，我会问NEXT这个问题，为什么只有在使用自动播放功能将情况＃1上传到服务器后才播放音频;我一直在试图用萤火虫来检测MIME，看它是否是错误的类型，但[更多的挫折] ...这是另一个线程另一个问题]

以下是完整的网站。

顺便说一句，我必须补充一点，上面情况＃2中的功能在我上传并在我的浏览器中从网络打开它（缓存到应该是播放视频的冻结帧）后无法工作，尽管它从本地文件夹在我的桌面上工作，以显示应该是播放视频的冻结帧... Ouch。

来源

2016-11-05 coderJoker

*结束补间工作正常，第一个补间被绕过*我认为第二个覆盖第一个，FYI。 – zer00ne

当你说它在台式机/笔记本电脑上工作时，我假设你想在移动设备上工作？ – zer00ne

主要是，当我使用我的笔记本电脑浏览网页时，它不起作用。我需要解决为什么btn click eventListener不起作用的问题，但是最终我需要获得手机功能。我认为这是另一个问题，与'点击'事件监听器有关。 – coderJoker

OH MY EFFING LORD。解决了它，但不知道如何...我以前尝试过这一点，但它没有工作，然后...我不知道它为什么现在工作。

\t var $vde = $("#T2Scast").get(0); 
 
$vde.play();

你告诉我。 3天，现在它工作。大声笑Java！

来源

2016-11-05 12:15:31 coderJoker

使用按钮通过video.js在html5中播放视频; MEGA问题

回答

相关问题