HTML5视频。如何仅在点击一个小静态图像时启动？

我希望能够点击一个小的缩略图图像，并有一个视频开始播放全尺寸。这类似于使用一个小图像，点击一下即可显示完整图像。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。如果电影的第一帧显示为小图片点击以运行电影，那么我将无法将每部电影的缩略图用作图像，这将非常好。

我想这样做的原因是，在页面上有我的空间很小，我希望把几部电影在一个表中的一行，因此需要的尺寸要小开始。

给Chris：

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

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

这是我使用的代码。哪一个是你的代码，我只是改变了电影的名字在这个中使用我的，所以我可以尝试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>

来源

2013-05-18 Steve H

在此示例中，之前那些DOM元素（视频标签）准备好您的脚本安装单击事件。 JsFiddle肯定可以隐藏你的。我正在编辑下面的示例来说明这一点。 –

关于HTML5视频未准备就绪......有一件事会令人讨厌的是，您必须至少支持两种视频格式才能支持桌面上的IE/Chrome/Firefox/Safari/Opera。不同的浏览器不支持单一视频格式。那会比你想要做的更令你烦恼。您的问题可以通过html，javascript和预处理的图像缩略图解决。看到我更新下面，你点击图片一个完整的例子，它在一个新的浏览器窗口中播放所需的视频打开。 –

你可以去这许多不同的方式。不过，我专注于你的问题的一部分，这是你认为不必为每部电影制作缩略图的好方法。

为了得到这一点，你必须依靠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/

（FYI：这些都是mp4文件因此IE和Chrome的工作，Firefox不会）

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

然后，您即可将视频加载到等待的“主窗口”中，这可能会导致另一次下载，更不用说此示例没有做任何事情来确保视频已加载（您可以这样做，但我认为这示例足以证明这一点）以避免不良的用户体验。

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

我会认真考虑开发一个服务器端的处理任务创建缩略图，这样你就可以建立一个更好的球员，一个不使浏览器下载所有的视频只是为了让图像缩略图。

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

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

诀窍这是选择器电线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视频播放器库。我认为站在那些已经在那里工作的人的肩上很好。

来源

2013-05-18 13:27:42

是的，它可以在你显示的jsfiddle链接中工作。但是，当我尝试它时，它在我的浏览器中不起作用。我发布了我尝试过的以及其他许多尝试。任何想法？ –

我已更新以显示完整示例，还包括将click事件的“接线”移至window.onload。您可以使用jQuery的ready事件或任何其他想要加载DOM的方法。我试图避免这个示例中的依赖关系，但当然可以随意使用任何你想要的库来连接你的事件。此示例工作时，我只是把它放在我的桌面上的文本文件，并在Chrome或IE10（允许阻止的内容后）或在一个活的Web服务器上打开：http://cellbycell.com/files/quickwebsamples/videothumbils。 html –

再次感谢。请参阅我的编辑以获取使用新的更新代码的结果。 –

从html5 poster attribute开始，看看它是否能解决您的目的。否则，如果你想扩大视频内联，改变它的CSS。如果你想扩展，并在弹出播放，请尝试一些视频弹出库像VLightBox

来源

2013-05-18 12:05:06

你真的尝试过吗？你可以有。我不知道人们为什么回答不完整，不工作，也不回答被问到的问题。所有海报所做的都是在电影正在加载时显示相同大小的图像。所以这没有任何解决我的问题，即使用缩略图图像点击以全尺寸播放电影。 –

HTML5视频。如何仅在点击一个小静态图像时启动？

回答

相关问题