在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视频播放事件中捕获视频源

回答

相关问题