使用 video.js 使用按钮播放 html5 中的视频；大问题答案

【问题标题】：Using a button to play a video in html5 with video.js; MEGA PROBLEMS使用 video.js 使用按钮播放 html5 中的视频；大问题
【发布时间】：2016-11-05 09:27:51
【问题描述】：

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

注意，我删除了标签的“控件”条目。我用 css 条目为这个视频设置了大小、不透明度和 z-index 的样式。我在下面的视频上完全覆盖了一个带有一些清晰区域的 .png 模板。我制作了另一个按钮 .png 并将具有最高 css z-index 的按钮放在顶部并带有 img ID="btn" 标记。

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

然后我有代码在另一个 main.js 文件中控制它。我尝试过 2 种变体，第二种是 MEGA PROBLEMS。第一个 sn-p 仅适用于具有本地文件的笔记本电脑/台式机，并且是一种“自动播放”（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 稍后，我将问下一个问题，为什么在我使用 case #1 和自动播放将其上传到服务器后只播放音频；我一直在尝试用 firebug 检测 MIME 以查看它是否是错误的类型，但是 [更多 FRUSTRATION]... 这是另一个线程的另一个问题。]

这是完整的网站： http://www.et-ent.com

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

【问题讨论】：

*结束补间工作正常，第一个补间被绕过*我认为第二个正在覆盖第一个，仅供参考。
当你说它可以在台式机/笔记本电脑上运行时，我假设你想在移动设备上运行？
主要是，当我使用笔记本电脑在网络上浏览它时，它不起作用。我需要解决为什么 btn click eventListener 不起作用的问题，但是最终我需要获得手机功能。我认为这是另一个问题，与“点击”事件侦听器有关。
我一直在搞乱“this.play();”和警报（“它有效！”）；看看函数（）中是否有问题...我已将其缩小到“this.play（）”作为问题区域...
$(".myClass").play();和 $("#myID").play();在我的 main.js 中不要播放视频。它在第一帧上保持冻结。当我将自动播放添加到它播放的 html5 视频标签时；当我插入 this.pause();到它不会暂停的脚本。

标签： jquery html5-video video.js

【解决方案1】：

哦，我的上帝。解决了，但不知道如何...我之前尝试过这个，但当时没有用...我不知道为什么它现在可以工作。

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

你告诉我。 3天，现在可以了。哈哈爪哇！

【讨论】：