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視頻。如何僅在點擊一個小靜態圖像時啓動？

回答

相關問題