Question

我的目标是在播放视频时播放视频的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属性来播放视频？如果video.mp4实际上用于播放视频，我想知道该值，但如果video.ogg实际上用于播放视频，我想知道该值。

Answer 1

您可以尝试这种方式：

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

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

Answer 2

看起来media elements有一个currentSrc属性来获取所选的媒体文件。

Answer 3

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);
    };
}

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

3 个答案: