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

Question

I am trying to create an HTML5 video player without the default controls that will play/pause by simply clicking the video(or overlaying div). 我正在尝试创建一个没有默认控件的HTML5视频播放器，只需单击视频（或覆盖div）即可播放/暂停。 I want to hide the default controls completely. 我想完全隐藏默认控件。 I want the user to only be able to pause/play by clicking on the video. 我希望用户只能通过点击视频暂停/播放。 Is this possible? 这可能吗？ My initial strategy was to overlay a transparent div above the element that would serve as my play/pause button. 我最初的策略是将透明div叠加在可用作我的播放/暂停按钮的元素上方。 Below is the HTML and javascript I started, but need a little bit of help. 下面是我开始的HTML和javascript，但需要一些帮助。 Thanks everyone! 感谢大家！

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

Answer 1

There's no need for two id attributes in the video tag, and there's no need for a separate source tag if only using one file format, and the video and poster you are linking to does not exist. 视频标签中不需要两个id属性，如果只使用一种文件格式，则不需要单独的源标签，并且您链接的视频和海报不存在。

Anyway, example below: 无论如何，下面的例子：

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

EDIT: adding a fiddle : http://jsfiddle.net/SKfBY/ 编辑：添加小提琴： http ： //jsfiddle.net/SKfBY/

Had a quick look at your site, and the video is cool :-) If you look closely you'll see that there are two jQuery files added, not really the problem here, but you only need one, the second one will make your page load slower. 快速浏览一下你的网站，视频很酷:-)如果你仔细观察，你会看到有两个jQuery文件被添加，这里不是真正的问题，但你只需要一个，第二个会让你的页面加载速度较慢 Also not the problem, but you should consider using the HTML5 doctype like below, as the video element is HTML5, but most browsers will figure it out anyway. 也不是问题，但您应该考虑使用HTML5 doctype，如下所示，因为视频元素是HTML5，但大多数浏览器无论如何都会想出来。 The problem seems to be my fault, jsFiddle automagically inserts the $document.ready function, and I forgot it in my example, that's why it's not working for you. 问题似乎是我的错，jsFiddle自动插入$ document.ready函数，我忘记了它在我的例子中，这就是为什么它不适合你。

Here is a complete rundown of how I would write it, I removed both instances of jQuery for you and replaced with Google's version of jQuery, wich is usually a better option, and also you should probably remove any scripts that you don't need, like removing swfObject if the site does not contain any flash files using swfobject etc. 以下是我将如何编写它的完整概述，我为您删除了jQuery的两个实例，并替换为Google的jQuery版本，这通常是更好的选择，而且您应该删除任何不需要的脚本，比如删除swfObject如果站点不包含使用swfobject等的任何flash文件。

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

Answer 2

This code works for me: 这段代码适合我：

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

But setting the time to 0 rewound the video only; 但是将时间设置为0仅重绕视频; no playback. 没有回放。 So I wanted the video to replay after rewinding, and came up with this: 所以我希望在倒带后重播视频，并想出了这个：

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

Here are the buttons: 这是按钮：

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

My two-cent's worth... 我的2美分价值......

Cheers 干杯

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

问题描述

2 个解决方案

解决方案1
2 已采纳 2011-10-07 03:57:36

解决方案2
0 2012-12-24 06:44:29

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

问题描述

2 个解决方案

解决方案1 2 已采纳 2011-10-07 03:57:36

解决方案2 0 2012-12-24 06:44:29

解决方案1
2 已采纳 2011-10-07 03:57:36

解决方案2
0 2012-12-24 06:44:29