HTML5视频。如何仅在单击小静态图像时启动？
我希望能够点击一个小的缩略图图像，并有一个视频开始播放的完整尺寸。这类似于使用一个小图像，用户可以单击它来显示完整的图像。
我在视频中使用了这个代码
<video src="my_movie.ogg" controls>
Your browser does not support the <code>video</code> element.
</video>有没有办法设置它，类似于youtube，有一张小图片，点击它就可以开始全尺寸的电影，类似于http://www.reddit.com/r/videos/？
如果我这样做了
<video src="my_movie.ogg" controls width=100px height=100px>
</video>然后电影保持太小，当点击它时看不到它。如果有一个初始宽度和运行时宽度可以使用，那就更好了。但事实并非如此。
是否也可以在单独的弹出窗口中打开电影，而不是新的html页面？这样原始网页仍可查看吗？
ps。这将是真的很好，如果电影的第一帧是显示为小图像点击运行电影，这样我就不会有一个缩略图图像的每个电影使用的图像。
我想这样做的原因是，我在页面上的空间很小，我想在表格的一行中放置几部电影，因此最初需要大小较小。
致克里斯：
我已经用过你的更新代码了。事情是这样的:使用IE和Chrome浏览器，当我点击图片时，什么也没有发生。但是，当右键单击时，我现在看到一个菜单，上面有“播放”。选择此选项时，将播放影片。但它只在小尺寸下播放，不能在大尺寸下播放。
当我尝试我自己的.ogv文件，使用在线服务从mp4转换成HTML视频时，同样的事情发生了。当我单击图像时，没有任何反应。当我右键单击并选择播放时，它就会播放。但仍然使用小尺寸。
下面是我使用的代码。这是你的代码，我把电影的名字改成了我的，这样我就可以试试firefox了。
看来HTML5视频还没有准备好在黄金时间播放？如何让它像U型管一样工作？点击小图像，在单独的窗口中打开大尺寸的电影(有一个弹出窗口会很好)，但首先它必须在相同的网页中工作，这是目前为止还没有的。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
window.onload = function() {
var videos = document.querySelectorAll(".thumbnail");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
};
function clickHandler(el) {
var mainVideo = document.getElementById("mainVideo");
mainVideo.src = el.srcElement.currentSrc;
}
</script>
<video id="mainVideo" autoplay></video><br/>
<video class="thumbnail" width=150 height=150>
<source src="movie.ogv">
</video>
</body>
</html>回答 2
Stack Overflow用户
发布于 2013-05-18 21:27:43
您可以通过许多不同的方法来实现此目的。然而，我专注于你的问题的一部分，那就是你认为不必为每部电影制作缩略图可能会很好。
为了实现这一点，你必须依靠HTML5视频标签为你抓取第一帧。实际上，我并不建议你走这条路线，但我想向你展示如何实现它。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<script>
window.onload = function() {
var videos = document.querySelectorAll(".thumbnail");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
};
function clickHandler(el) {
var mainVideo = document.getElementById("mainVideo");
mainVideo.src = el.srcElement.currentSrc;
}
</script>
<video id="mainVideo" width=320 height=240 autoplay></video><br/>
<video class="thumbnail" width=100 height=100>
<source src="http://html5demos.com/assets/dizzy.mp4" type="video/mp4">
</video>
<video class="thumbnail" width=100 height=100>
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</body>
</html>你也可以在这里测试一下：http://jsfiddle.net/E4uDB/
(仅供参考:这些都是mp4s，所以IE和Chrome可以用，火狐不行)
这种方法还有很多工作要做。首先，您要求页面加载视频只是为了制作缩略图。这是相当糟糕的，因为用户必须下载视频才能获得您可以在服务器端完成的功能(在处理时)。
然后将视频动态加载到等待的“主窗口”中，这可能会导致另一次下载，更不用说这个示例没有做任何事情来确保视频被加载(您可以做到这一点，但我认为这个示例演示了足够的要点)，以避免糟糕的用户体验。
我不推荐这样做，因为更好的方法是在某种处理任务中创建图像缩略图，并将它们的图像单击事件链接起来，以加载和播放所需的视频。您已经掌握了如何从我的示例中引导video元素加载和播放新源的要点，但它肯定不会尝试成为可用于生产的代码。
我会强烈考虑开发一个服务器端处理任务来创建图像缩略图，这样你就可以构建一个更好的播放器，而不是让浏览器下载所有的视频来制作图像缩略图。
另一个示例：http://cellbycell.com/files/quickwebsamples/Videothumbnails/videochooser.html
单击图像，它将打开并在新的浏览器窗口中播放所需的视频。
其中的诀窍是，chooser将一个click事件连接到图像，然后使用图像的id将查询字符串变量传递给播放器页面。该页面提取查询字符串并播放您选择的视频。在两个页面上查看源代码，但一些亮点是：
选择器页面：
<script>
window.onload = function() {
var videos = document.querySelectorAll(".thumbnail");
for (var i = 0; i < videos.length; i++) {
videos[i].addEventListener('click', clickHandler, false);
};
}
function clickHandler(el) {
window.open("http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/VideoPlayer.html?Video=" + el.target.id);
}
</script>
Select your video<br/>
<img id="Tool" class="thumbnail" src="http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/Tool.png">
<img id = "Cat" class="thumbnail" src="http://cellbycell.com/files/QuickWebSamples/VideoThumbnails/Cat.png">目标播放器页面：
<script>
window.onload = function() {
var videoPlayer = document.getElementById("videoPlayer");
var videoId = queryObj()["Video"];
switch(videoId)
{
case "Tool":
videoPlayer.src="http://techslides.com/demos/sample-videos/small.mp4";
break;
case "Cat":
videoPlayer.src="http://html5demos.com/assets/dizzy.mp4";
break;
}
}
function queryObj() {
var result = {}, keyValuePairs = location.search.slice(1).split('&');
keyValuePairs.forEach(function(keyValuePair) {
keyValuePair = keyValuePair.split('=');
result[keyValuePair[0]] = keyValuePair[1] || '';
});
return result;
}
</script>
Enjoy your video!<br/>
<video id="videoPlayer" autoplay controls></video>无论你决定做什么，你都有一些工作要做。我强烈建议你也去找一些JavaScript视频播放器的库。我认为站在那些已经在努力的人的肩膀上是很好的。
Stack Overflow用户
发布于 2013-05-18 20:05:07
从html5 poster attribute开始，看看它是否能解决您的问题。否则，如果您想扩展视频内联，请更改它的CSS。如果您想在弹出窗口中展开和播放，请尝试一些视频弹出窗口库，如VLightBox
https://stackoverflow.com/questions/16623215
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号