使用 HTML5 视频和 Javascript 自定义控件的视频答案

【问题标题】：Video with custom controls using HTML5 video and Javascript使用 HTML5 视频和 Javascript 自定义控件的视频
【发布时间】：2011-12-02 17:12:28
【问题描述】：

我正在尝试创建一个没有默认控件的 HTML5 视频播放器，只需单击视频（或覆盖 div）即可播放/暂停。我想完全隐藏默认控件。我希望用户只能通过单击视频来暂停/播放。这可能吗？我最初的策略是在元素上方覆盖一个透明的 div，作为我的播放/暂停按钮。下面是我开始的 HTML 和 javascript，但需要一点帮助。谢谢大家！

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

【问题讨论】：

可能不需要div覆盖，您可以将点击事件绑定到视频元素本身以进行开始/暂停。如果您确切地指定了您需要帮助的内容，而不仅仅是您需要帮助，这也会有所帮助？是不是有什么东西不工作，或者你想让我们猜猜？

标签： javascript html video poster

【解决方案1】：

video标签不需要两个id属性，如果只使用一种文件格式也不需要单独的source标签，并且你链接的视频和海报不存在。

不管怎样，下面的例子：

<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 文件，这并不是真正的问题，但你只需要一个，第二个会使你的页面加载速度变慢。也不是问题，但您应该考虑使用下面的 HTML5 文档类型，因为视频元素是 HTML5，但大多数浏览器无论如何都会弄清楚。问题似乎是我的错，jsFiddle 自动插入 $document.ready 函数，我在我的示例中忘记了它，这就是它不适合你的原因。

这是我将如何编写它的完整纲要，我为您删除了两个 jQuery 实例并替换为 Google 的 jQuery 版本，这通常是一个更好的选择，而且您可能应该删除您不使用的任何脚本'不需要，例如如果站点不包含任何使用 swfobject 的 flash 文件等删除 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>

【讨论】：

感谢adeno！我删除了“自动播放”属性来测试它，但它既不播放也不暂停……它对你有用吗？
谢谢adeno，我想我真的很接近了。你的小提琴似乎工作得很好。我模仿了它，但仍然不成功。你介意看看吗？谢谢阿德诺！ d3v.lavalobe.com/voicecarousel/test.html
查看了您的网站，但我想出的答案是渴望发表评论，因此编辑了我的答案。希望它能为你解决一切:-)
是的！现在完美运行，非常感谢adeno！并感谢有关使用 Google 版本的 jQuery 的建议，从现在开始我一定会这样做。谢谢你解决了我的头痛！！！
完美。简单，正是我所需要的。

【解决方案2】：

此代码适用于我：

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 只会倒带；没有播放。所以我想让视频在倒带后重播，然后想出了这个：

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 = "||";
}

这里是按钮：

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

我的两分钱值...

干杯

【讨论】：