0

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

我正在将此代码用于视频

<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 页面中打开电影？这样原始网页仍然在视图中吗？

附言。如果电影的第一帧显示为小图像以单击以运行电影，那就太好了，这样我就没有制作每部电影的缩略图来用作图像了。

我想这样做的原因是我在页面上的空间很小，我想在一张桌子的一行中放几部电影，因此最初需要很小的尺寸。

致克里斯：

我已经使用了您更新的代码。这就是发生的事情：使用 IE 和 Chrome，当我单击图像时，什么也没有发生。但是，当右键单击时，我现在看到一个带有“PLAY”的菜单。选择此项时，电影会播放。但它只播放小尺寸，而不是大尺寸。

当我尝试自己的 .ogv 文件，使用在线服务从 mp4 转换为 HTML 视频时，同样的事情发生了。当我单击图像时，没有任何反应。当我右键单击并选择播放时，它会播放。但仍然使用小尺寸。

这是我使用的代码。这是您的代码，我刚刚更改了电影的名称以在这部电影中使用我的代码，因此我可以尝试使用 firefox。

似乎 HTML5 视频还没有准备好迎接黄金时段？如何让它像 u-tube 一样工作？单击小图像，在单独的窗口中打开大尺寸电影（最好有一个弹出窗口），但首先它必须在同一个网页中工作，到目前为止它还没有。

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

2 回答 2

2

你可以通过许多不同的方式来解决这个问题。但是，我专注于您问题的一部分，即您认为不必为每部电影制作缩略图可能会很好。

为了做到这一点，您必须依靠 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 视频播放器库。我认为站在那些已经为此工作的人的肩膀上是件好事。

于 2013-05-18T13:27:42.933 回答
1

从html5 海报属性开始，看看它是否能解决您的目的。否则，如果您想内联扩展视频，请将其更改为 CSS。如果您想在弹出窗口中扩展和播放，请尝试一些视频弹出库，例如VLightBox

于 2013-05-18T12:05:06.970 回答