在html5視頻播放事件中捕獲視頻源

我的目標是在播放視頻時獲取視頻播放的src。在html5視頻播放事件中捕獲視頻源

目前，我有以下代碼：

<!doctype html> 
<html> 
<head> 
</head> 
<body> 
<video width="320" height="240" controls> 
    <source src="video.mp4" type="video/mp4"> 
    <source src="movie.ogg" type="video/ogg"> 
Your browser does not support the video tag. 
</video> 

<script type='text/javascript'> 
var vid = document.getElementsByTagName('video')[0]; 
vid.addEventListener('play', function() { 
    console.log('video source:',this.src); 
}, false); 
</script> 
</body> 
</html>

所以我的第一個問題是this.src不起作用;它輸出一個空字符串。我認爲這是因爲src實際上並不是video標記的一部分，而是在source子標記中。

然後我試圖添加到我的函數如下：

for (var p in this) { 
    console.log(p, this[p]); 
}

我這樣做是爲了看看我能找到的任何屬性引用..但我沒有看到任何直接引用呢？那麼獲取源代碼真正抓住子節點source的唯一方法是什麼？如果是這樣...那麼...

我的第二個問題，我將如何確定哪個src屬性實際上用於播放視頻？ IOW如果video.mp4實際上用於播放視頻，我想知道該值，但如果video.ogg實際上用於播放視頻，我想知道該值。

來源

2013-11-22 slinkhi

檢查了這一點：https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video – melancia

你可以試試這個方法：

var vid = document.getElementsByTagName('video')[0]; 

vid.addEventListener('play', function() { 
    console.log('video source:',this.currentSrc); 
}, false);

來源

2013-11-22 17:30:43 melancia

我回去看了一下東西，從我的環路輸出和果然，它在那裏..我是盲目的！謝謝！ – slinkhi

貌似media elements有currentSrc屬性來獲得所選擇的媒體文件。

來源

2013-11-22 17:31:36 SpliFF

HTML5視頻元素已經有事件，所以不需要添加監聽器。這是我的方式。

var myVid = document.getElementById('videoId');  
if(myVid != null)//if possibility of no video loaded in DOM 
{ 
    myVid.onplay = function() { 
     console.log('video source: ' + myVid.currentSrc); 
    }; 
}

來源

2016-08-26 19:29:33

在html5視頻播放事件中捕獲視頻源

回答

相關問題