Question

我希望能够点击一个小缩略图并让视频开始以完整尺寸播放。这类似于使用小图像点击以显示完整图像的图像。

我正在使用此代码进行视频

<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，当我点击图像时，没有任何反应。但是，当右键单击时，我现在看到一个菜单上有“PLAY”。选择此项时，电影确实会播放。但它只是体积小而不是大尺寸。

当我尝试使用自己的.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>

Answer 1

你可以采用这种方式。但是，我专注于你问题的一部分，那就是你认为不必制作每部电影的缩略图可能会很好。

为了实现这一目标，您必须依靠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/

（仅供参考：这些是mp4，所以IE和Chrome都可以使用，Firefox不支持）

这种方法有一些工作要做。首先，您要求页面加载视频才能制作缩略图。这非常糟糕，因为用户必须下载视频才能获得可以完成服务器端的功能（在处理时）。

然后您可以将视频动态加载到等待的“主窗口”中，这可能会导致另一次下载，更不用说此示例不会确保视频已加载（您可以执行此操作，但我认为此示例充分展示了这一点，以避免糟糕的用户体验。

我不建议这样做，因为更好的方法是在某种处理任务中创建图像缩略图，并链接其图像点击事件以加载和播放所需的视频。您将了解如何指导视频元素加载并从我的示例中播放新的源代码，但它肯定不是尝试生成就绪代码。

我会强烈考虑开发一个服务器端处理任务来创建图像缩略图，这样你就可以构建一个更好的播放器，而不会让浏览器下载所有视频只是为了制作图像缩略图。

另一个示例：http://cellbycell.com/files/quickwebsamples/Videothumbnails/videochooser.html

单击图像，它将打开并在新的浏览器窗口中播放所需的视频。

这方面的技巧是选择器将点击事件连接到图像，然后它使用图像的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视频播放器库。我认为站在已经工作过的人的肩膀上是件好事。

Answer 2

从html5 poster attribute开始，看看它是否能解决您的目的。否则，如果您想要内联扩展视频，请更改它的CSS。如果您想要在弹出窗口中展开和播放，请尝试使用VLightBox

等视频弹出库

HTML5视频。如何在单击小静态图像时启动？

2 个答案: