Question

我无法解决以下问题：

HTML code：

<video poster="http://www.html5rocks.com/en/tutorials/video/basics/star.png" controls="">
   <source src="http://www.html5rocks.com/en/tutorials/video/basics/Chrome_ImF.ogv" type="video/ogg; codecs=&quot;theora, vorbis&quot;">
</video>

如果视频标签没有id属性，如何播放或暂停此视频？我尝试使用谷歌浏览器开发工具并手动将id属性添加到视频标签，然后尝试使用javascript播放视频：

var p = document.getElementById('player_id');
p.play();

使用Google Chrome开发工具改变我的HTML就像是：

    <video id="player_id" poster="http://www.html5rocks.com/en/tutorials/video/basics/star.png" controls="">
...

但在页面加载后手动添加了id属性。当我尝试在谷歌Chrome控制台中执行javascript以上的javascript代码时，我收到了这个错误：

**TypeError: Cannot call method 'play' of null**

javascript代码在视频标记上运行完美，在页面加载时具有id。我也试过这个代码，这是不工作的id视频标签在页面加载时没有id属性：

var players = document.getElementsByTagName('video'); 
  for(var i=0; i<players.length; i++)players[i].play();

如何访问视频标记控件，例如播放，暂停，...如果此标记没有ID？

示例页面 http://www.html5rocks.com/en/tutorials/video/basics/

示例页面包含更多视频，我还想暂停或只播放单独的视频，而且我对如何在页面上暂停所有视频感兴趣。

Answer 1

如果页面上只有一个视频元素，那么这应该有效：

document.getElementsByTagName("video")[0].play();

Working example

注意：

你必须在DOM准备好之后调用它，以确保当你尝试选择它时，视频元素实际上在DOM中。最简单的方法是将这段代码放在脚本标记中，就在body元素的末尾。这样你就可以确定视频元素在DOM中可用了。

Answer 2

如果您只有一个视频标记，则可以使用getElementsByTagName('video')避免使用后期DOM渲染操作。

其他解决方案，当你把id放在dom之后渲染整个。

没有ID的视频标签

2 个答案: