搜索引擎優化HTML5視頻（video.js）介紹與覆蓋淡出

我使用video.js插件，並有一個視頻介紹播放時，我的網站加載。它在頁面加載後通過自動運行工作，並且位於一個Z容器中，該容器在我的主頁上進行z索引和覆蓋。搜索引擎優化HTML5視頻（video.js）介紹與覆蓋淡出

我把jquery設置爲delay()，然後div顯示我的主頁。

從理論上講，只有每個人都有不同的連接速度，並且往往發生得太早或太遲。

當視頻停止時，我的div有嗎？

這裏是我的jQuery：

$(document).ready(function() { 
     $("#overlay-video").delay(10000).fadeOut('slow'); 
    });

編輯：我剛纔也試過以下，但這也不起作用：

$(document).ready(function(){ 
    $("#movie-id").bind('ended', function(){ 
    alert("planet earth"); 
    }); 
});

感謝我的HTML看起來像這樣的答覆：

<div id="overlay-video"> 
    <!-- Begin Video.js --> 
    <video id="movie-id" class="video-js vjs-default-skin alignleft" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" controls preload="auto" autoplay data-setup="{}"> 
     <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> 
     <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm; codecs="vp8, vorbis"' /> 
     <source src="http://video-js.zencoder.com/oceans-clip.ogg" type='video/ogg; codecs="theora, vorbis"' /> 
    </video> 
    <!-- End Video.js --> 
</div>

我的jQuery工作，因爲我可以fadeOut視頻元素罰款。

來源

2012-05-08 BrettGolding

你的第二個代碼片段看起來是正確的。如果您到達視頻的末尾，「結束」應該會觸發;如果不是，也許別的東西是錯的？如果綁定'timeupdate'會怎麼樣？（但是，對於這種情況，請儘量避免使用「alert」這個令人討厭的東西 - 我相信它應該會激發很多，所以如果您在現代瀏覽器中進行測試，console.log會很好。） – apsillers

哪些瀏覽器做過你測試（名稱，版本，操作系統）？還請添加您的HTML代碼，以便我們可以排除錯誤的ID。你正在使用哪個jQuery版本？從1.7開始'.on（）'代替'.bind（）'（因此不推薦使用 –

@brettGolding，只是好奇如果apsillers的建議對你有用 –

兩件事情：

需要爲您的主頁上的所有腳本
使用on()方法（使用jQuery 1.7+）
最重要的，只有一個doc.ready FXN需要在on('ended')內功能

作爲一般的HTML5 <video>的解決方案，這應該工作：http://jsfiddle.net/trpeters1/XzCMb/1/

$(document).ready(function(){ 
    $("#movie-id").on('ended', function() {    
     console.log('im done'); 
     $("#overlay-video").delay(10000).fadeOut('slow'); 
    }); 
});

然而，視頻JS似乎需要到的Video.js對象的調用，所以做這個：http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video

_V_("#movie-id").ready(function(){ //note the different selector for the ready() fxn 
    this.addEvent("ended", function(){ //adding "ended" event to video-js object 
    { console.log('im done'); 
     $("#overlay-video").delay(10000).fadeOut('slow'); 
     } 
    }); 
});

來源

2012-05-08 12:57:11

沒有運氣，我可以用fadeOut淡出視頻沒有問題，所以問題出在.on或.blind函數。它可能與我的HTML有關嗎？我正在使用視頻。js wordpress插件或者我有3個不同的視頻源。 – BrettGolding

@BrettGolding檢查出我的jsfiddle它爲我工作：http://jsfiddle.net/trpeters1/XzCMb/1/是的，我認爲這與它的Video.js必須以某種方式重寫此'上（「結束」做）'函數 –

@BrettGolding檢查此鏈接：http://help.videojs.com/discussions/questions/509-videojs-and-passing-an-event-at-the-end-of-the-video它專門處理調用video.js對象on（'ended'）'。這裏就是你需要的代碼：'<腳本類型= 「文/ JavaScript的」> _V _（「example_video_1」）準備就緒（函數（）{ this.addEvent（「結束」，函數（）{{ = window.location的「www.google.com」}} }）; }）; ' –

搜索引擎優化HTML5視頻（video.js）介紹與覆蓋淡出

回答

相關問題