HTML 5 代码直接在网页上播放视频兼容所有浏览器
我的图书馆
HTML 5 代码直接在网页上播放视频兼容所有浏览器
测试代码，如下：&video width="320" height="240" controls="controls"&
&source src="movie.ogg" type="video/ogg"&
&source src="movie.mp4" type="video/mp4"&Your browser does not support the video tag.&/video&
为了更好的适应PC与手机，采用宽100% &高auto ,代码可以这样写吗?
HTML5可以用video标签来播放视频
当前，video 元素支持三种视频格式：
格式 IE Firefox Opera Chrome Safari
Ogg No 3.5+ 10.5+ 5.0+ No
MPEG 4 9.0+ No No 5.0+ 3.0+
WebM No 4.0+ 10.6+ 6.0+ No
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
MPEG4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
&代码如下 复制代码
&video width="320" height="240" controls="controls"&
&source src="movie.ogg" type="video/ogg"&
&source src="movie.mp4" type="video/mp4"&Your browser does not support the video tag.&/video&
video 元素允许多个 source 元素。source 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式!
这样就确保了兼容所有浏览器
音频也是一样有一个audio标签
当前，audio 元素支持三种音频格式：
IE 9 Firefox 3.5 Opera 10.5 Chrome 3.0 Safari 3.0
Ogg Vorbis √ √ √
MP3 √ √ √
Wav √ √ √
&代码如下 复制代码
&audio controls="controls"&
&source src="song.ogg" type="audio/ogg"&
&source src="song.mp3" type="audio/mpeg"&Your browser does not support the audio tag.&/audio&
不断测试中~~
发表评论：
馆藏&36259
TA的推荐TA的最新馆藏[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&[转]&HTML 音频(Audio)
声音在HTML中可以以不同的方式播放.
问题以及解决方法
在 HTML 中播放音频并不容易！
您需要谙熟大量技巧，以确保您的音频文件在所有浏览器中（Internet Explorer, Chrome, Firefox, Safari, Opera）和所有硬件上（PC, Mac , iPad, iPhone）都能够播放。
在本章，W3CSchool 为您总结了问题和解决方法。
浏览器插件是一种扩展浏览器标准功能的小型计算机程序。
插件可以使用 &object& 标签 或者 &embed& 标签添加在页面上.
这些标签定义资源（通常非 HTML 资源）的容器，根据类型，它们即会由浏览器显示，也会由外部插件显示。
使用 &embed& 元素
&embed&标签定义外部（非 HTML）内容的容器。（这是一个 HTML5 标签，在 HTML4 中是非法的，但是所有浏览器中都有效）。
下面的代码片段能够显示嵌入网页中的 MP3 文件：
&embed height="50" width="100" src="horse.mp3"&
&embed& 标签在 HTML 4 中是无效的。页面无法通过 HTML 4 验证。
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
使用 &object& 元素
&object tag& 标签也可以定义外部（非 HTML）内容的容器。
下面的代码片段能够显示嵌入网页中的 MP3 文件：
&object height="50" width="100" data="horse.mp3"&&/object&
不同的浏览器对音频格式的支持也不同。
如果浏览器不支持该文件格式，没有插件的话就无法播放该音频。
如果用户的计算机未安装插件，无法播放音频。
如果把该文件转换为其他格式，仍然无法在所有浏览器中播放。
使用 HTML5 &audio& 元素
HTML5 &audio& 元素是一个 HTML5 元素，在 HTML 4 中是非法的，但在所有浏览器中都有效。
The &audio& element
works in all modern browsers.
以下我们将使用 &audio& 标签来描述 MP3 文件(Internet Explorer、Chrome 以及 Safari 中是有效的), 同样添加了一个
OGG 类型文件(Firefox 和 Opera浏览器中有效).如果失败，它会显示一个错误文本信息:
&audio controls&
&source src="horse.mp3" type="audio/mpeg"&
&source src="horse.ogg" type="audio/ogg"&
Your browser does not support this audio format.
&audio& 标签在 HTML 4 中是无效的。您的页面无法通过 HTML 4 验证。
您必须把音频文件转换为不同的格式。
&audio& 元素在老式浏览器中不起作用。
最好的 HTML 解决方法
下面的例子使用了两个不同的音频格式。HTML5 &audio& 元素会尝试以 mp3 或 ogg 来播放音频。如果失败，代码将回退尝试 &embed& 元素。
&audio controls height="100" width="100"&
&source src="horse.mp3" type="audio/mpeg"&
&source src="horse.ogg" type="audio/ogg"&
&embed height="50" width="100" src="horse.mp3"&
您必须把音频转换为不同的格式。
&embed& 元素无法回退来显示错误消息。
雅虎媒体播放器 - 一个简单的添加音频到你网站上的方式
使用雅虎播放器是免费的。如需使用它，您需要把这段 JavaScript 插入网页底部：
雅虎播放器可以播放MP3以及其他各种格式。你只需添加一行代码到你的页面或
博客中就可以轻松地将您的HTML页面制作成
专业的播放列表：
&a href="horse.mp3"&Play Sound&/a&
&script src="/latest"&&/script&
如果你要使用它，您需要把这段 JavaScript 插入网页底部：
&script src="/latest"&&/script&
然后只需简单地把 MP3 文件链接到您的 HTML 中，JavaScript 会自动地为每首歌创建播放按钮：
&a href="song1.mp3"&Play Song 1&/a&
&a href="song2.wav"&Play Song 2&/a&
雅虎媒体播放器为您的用户提供的是一个小型的播放按钮，而不是完整的播放器。不过，当您点击该按钮，会弹出完整的播放器。
请注意，这个播放器始终停靠在窗框底部。只需点击它，就可将其滑出。
使用超链接
如果网页包含指向媒体文件的超链接，大多数浏览器会使用"辅助应用程序"来播放文件。
以下代码片段显示指向 mp3 文件的链接。如果用户点击该链接，浏览器会启动"辅助应用程序"来播放该文件：
&a href="horse.mp3"&Play the sound&/a&
内联的声音说明
当您在网页中包含声音，或者作为网页的组成部分时，它被称为内联声音。
如果您打算在 web 应用程序中使用内联声音，您需要意识到很多人都觉得内联声音令人恼火。同时请注意，用户可能已经关闭了浏览器中的内联声音选项。
我们最好的建议是只在用户希望听到内联声音的地方包含它们。一个正面的例子是，在用户需要听到录音并点击某个链接时，会打开页面然后播放录音。
HTML 多媒体标签
HTML5 新标签
定义内嵌对象。HTML4 中不赞成，HTML5 中允许。
定义内嵌对象。
定义对象的参数。
定义了声音内容
定义一个视频或者影片
定义了media元素的多媒体资源(&video& 和 &audio&)
规定media元素的字幕文件或其他包含文本的文件 (&video& 和&audio&)
反馈内容（*必填）
截图标记颜色
联系方式(邮箱)
联系邮箱：
投稿页面：
记住登录状态
重复输入密码最后登录13-12-13在线时间5 小时赞0 注册时间13-11-5积分36帖子精华0UID538254
注册日期: 13-11-5
帖子: 12|积分: 36
赞助商广告
Safari 7.0
Mac OS X 10.9
昨天打开safari 打开优酷，按照提示装入了Adobe flash，但是还是依旧不能播放网页视频。（重启、Safari还原都试过了）macbook 是最近新买的，并且家里两天mac都是这样的问题。求大侠解决
最后登录17-1-11在线时间5407 小时赞16 注册时间11-5-4积分7690帖子精华0UID214703
( ♘马上有钱 )
分享于 13-11-5 22:56:28
Safari 7.0
Mac OS X 10.9
最后登录16-12-17在线时间1790 小时赞3 注册时间13-10-26积分1400帖子精华0UID534491
( ☆☆☆ )
分享于 13-11-6 07:42:03
没人帮你解决只能换浏览器了
最后登录16-9-20在线时间2196 小时赞6 注册时间13-4-2积分980帖子精华0UID477176
( ☆☆☆ )
分享于 13-11-6 08:58:54
Chrome 30.0.1588.0
Mac OS X 10.8.5
safari-偏好设置-安全性-允许插件&&勾上&&应该能解决你的问题.& &&&如果每个网站都谈提示 进入管理网站设置，访问其他网站时，选择总是允许。
最后登录17-1-12在线时间3884 小时赞22 注册时间13-3-25积分5682帖子精华0UID474981
( ☆☆☆☆☆ )
分享于 13-11-6 09:03:56
Safari 7.0
Mac OS X 10.9
有没有提醒你节电设置，关掉那个就好了
最后登录13-12-4在线时间30 小时赞0 注册时间11-7-8积分28帖子精华0UID226442
分享于 13-11-6 21:27:38
Safari 7.0
Mac OS X 10.9
Security_Internet plug -ins_Allow Plug-ins
最后登录13-12-13在线时间5 小时赞0 注册时间13-11-5积分36帖子精华0UID538254
分享于 13-11-14 19:58:47
Safari 7.0
Mac OS X 10.9
Sammy Tong 发表于 13-11-6 21:27
Security_Internet plug -ins_Allow Plug-ins
what？？这是
最后登录13-12-13在线时间5 小时赞0 注册时间13-11-5积分36帖子精华0UID538254
分享于 13-11-14 19:59:04
Safari 7.0
Mac OS X 10.9
iskuld 发表于 13-11-6 09:03
有没有提醒你节电设置，关掉那个就好了
关掉了还是不行
最后登录13-12-13在线时间5 小时赞0 注册时间13-11-5积分36帖子精华0UID538254
分享于 13-11-14 20:00:30
Safari 7.0
Mac OS X 10.9
zxdper 发表于 13-11-6 08:58
safari-偏好设置-安全性-允许插件&&勾上&&应该能解决你的问题.& &&&如果每个网站都谈提示 进入管理网站设置 ...
还是不行。。。。
最后登录13-12-13在线时间5 小时赞0 注册时间13-11-5积分36帖子精华0UID538254
分享于 13-11-14 20:00:53
Safari 7.0
Mac OS X 10.9
kingwang 发表于 13-11-5 22:56
你的直接打开就能看吗 ？(湖南长沙)
weibo: /ufologist slideshare: slideshare.net/ufologist gith...
U_U的最新日记
······
······
生于日 · 224条内容
用理解代替批判 · 237条内容
再也不想上当了！ · 706条内容
你和坐在对面的人相处愉快吗？ · 396条内容
愿明年今日它也是你的年终总结 · 3579条内容
年初计划完成了多少？ · 1379条内容
推荐这篇日记的豆列
······