Question

帮助！我花了3天的时间试图用我的video.js代码来解决这个问题！请帮忙！好的，我有一个~10mb mp4的视频可以在VLC中播放。我正在使用jquery构建一个网站，它使用video.js来处理这个mp4。我有标题标签来访问video.min.js，video-js.min.css和jquery-3.1.1.min.js。我将li-tag中的html5视频标签包装在body标签的ul-tag中的div-tag中：

<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-index的css条目设计了这个视频。我在.png模板上覆盖了一些明显的区域，完全覆盖了下面的视频。我创建了另一个按钮.png并将顶部最高的css z-index放在img ID =“btn”标签上。

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

然后我有代码在另一个main.js文件中控制它。我有2种不同的尝试，第二种是MEGA问题。第一个片段仅适用于带有本地文件的笔记本电脑/台式机，并且是一种“自动播放”（仅适用于笔记本电脑/台式机上的video.js标签的自动播放;当我从html5中删除它并使用此jq时替换它只能在笔记本电脑/台式机上播放）：

var $vde = $("#T2Scast");
$vde.on("canplaythrough", function() {
	TweenLite.to($vde, .5, {autoAlpha:1})
	this.play();
	$vde.on("ended", function(){
	TweenLite.to($vde, .5, {autoAlpha:0})
	})
});

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

第二次我试过这个：

var $vde = $("#T2Scast");
var $vdeBTN = $("#btn");
$vdeBTN.on("click", function() {
	TweenLite.to($vde, .5, {autoAlpha:1})
	
	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!*/

	$vde.on("ended", function(){
	TweenLite.to($vde, .5, {autoAlpha:0})
	});
});

这对我来说非常令人沮丧。当我设置css opacity = 1时，我可以看到视频第一帧的冻结帧;当我设置opacity = 0时，它将补间并仍然显示相同的冻结帧。我究竟做错了什么？为什么我不能在某处浮动.png并附加eventListener'click'并将该事件传递到视频中？我知道如果我在视频上分层图像，我就无法使用视频播放控件或该图层下的按钮，这就是我将按钮放在顶部z-index的原因。丢失。

[PS稍后，我将询问NEXT的问题，为什么在我使用带有自动播放的情况＃1将其上传到服务器之后才播放音频;我一直试图用firebug检测MIME以查看它是否是错误的类型，但是[更多的争议] ......这是另一个线程的另一个问题。]

以下是完整网站： http://www.et-ent.com

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

使用按钮以html5播放带有video.js的视频; MEGA问题

0 个答案: