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

发布于 2024-12-08 20:40:49 字数 1236 浏览 0 评论 0原文

我正在尝试创建一个没有默认控件的 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 -->

原文

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). 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. Below is the HTML and javascript I started, but need a little bit of help. 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 -->

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

情徒 2024-12-15 20:40:49

视频标记中不需要两个 id 属性，如果仅使用一种文件格式，并且您链接到的视频和海报不存在，则不需要单独的源标记。

无论如何，示例如下：

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

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.

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/

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

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.

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

回复收藏 0 原文

月亮邮递员 2024-12-15 20:40:49

这段代码对我有用：

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)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>

我的两美分值......

干杯

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; 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)"><<</button>
<button id="play" onclick="vidplay()">></button>
<button id="fastFwd" onclick="skip(10)">>></button>
</div>

My two-cent's worth...

Cheers

回复收藏 0 原文

~没有更多了~