#html audio

从零开始学web前端开发使用HTML&CSS设计与构建网站笔记：第九课，如何向网站中添加视频和音频、HTML5中的元素和元素

HTML5：添加视频的准备工作

支持

目前新版本的浏览器都支持HTML5的<video>元素

格式

为了兼容尽可能多的浏览器，你应该至少提供以下两种格式的视频：

H264：IE、Safari

WebM：Android、Chrome、Firefox、Opera

数字版权

<video>元素尚未支持所有类型的数字版权管理（DRM——也称为复制保护）

控件

浏览器为播放器提供默认的控件，但不同浏览器中的控件各不相同

HTML5：向网页中添加视频

<video>的特性：

src

指定视频的路径

poster

在视频加载时或视频播放之前，指定在播放器中显示一个图像

width,height

指定播放器的大小

conttols

表示浏览器需要提供默认的播放控件

autoplay

自动播放

loop

循环播放

preload

告诉浏览器在页面加载时需…

The one thing I’ve noticed about the audio and video tags in html is that they don’t always load correctly. And, some browsers will only play certain file types. Oh wait, that is two things. Sorry. 

Anyway, you’re almost better off with the embed code given by each specific site, rather than using the audio or video tag - except in the case of Archive.org, it is a bit harder to embed a single item that is part of a playlist of items, so you might be stuck with the audio tag. 

Hopefully, this will improve, as we are told html audio/video is the way it will be done soon, without flash - although I keep running into sites all over that want to use flash and do it the old way still. Strange how they can make it work perfectly for a tablet app, but can’t seem to do it on the rest of the internet....

After updating Capybara, all my steps featuring the audio element started failing. After asking around and googling, I came across this explanation for how Capybara handles hidden elements.

Capybara now has the property ignore_hidden_elements default to true. As an audio element is considered a hidden element, it is no longer visible to selectors by default.

You can change this default behaviour by adding Capybara.ignore_hidden_elements = false to your support/env.rb file, or you can add :visible => false to individual queries.

All that was required to get my features passing again; was changing my step definitions, from this:

page.should have_selector('audio#elRaptorShriek')

to this: