在html5视频播放事件上捕获视频源

capturing video source on html5 video play event

本文关键字：视频 事件 html5 播放      更新时间：2023-09-26

我的目标是在播放视频时获得视频的src。

我目前有以下代码：

<!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真的被用于播放视频，那么我想知道那个值。

您可以尝试以下方式：

var vid = document.getElementsByTagName('video')[0];
vid.addEventListener('play', function() {
    console.log('video source:',this.currentSrc);
}, false);

看起来媒体元素有一个currentSrc属性来获取所选媒体文件。

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);
    };
}
相关文章：