前端学习笔记day01 html 标签之音频 embed+audio+video
1. embed標(biāo)簽
有時(shí)候視頻很大，我們不直接從本地導(dǎo)入到html中，而是從優(yōu)酷上直接復(fù)制html代碼 即可；
?
2. 如果是一些小的視頻文件 可以借助video標(biāo)簽
2.1 <video src="視頻地址 autoplay controls"> </video>? -------標(biāo)簽內(nèi)屬性有src(視頻的地址) autoplay(自動(dòng)播放) controls(顯示播放控件)
2.2 但是有的瀏覽器有可能不支持某些格式 考慮到兼容性可以借助source標(biāo)簽寫成如下形式：
? ?<video autoplay controls>
? ? ? <source src="Mp4格式的視頻"> </source>
? ? ?<source src="ogg格式的視頻"> </source>
? ? ?<source src="WebM格式的視頻"> </source>
? ?</video>
3. audio聲音標(biāo)簽
3.1標(biāo)準(zhǔn)寫法： <audio src="聲音文件" autoplay controls loop="-1"> </audio>? ? loop=-1代表無限循環(huán)播放;
3.2 如果有些瀏覽器不能兼容某些格式的生意 可以寫成:
? ?<audio autoplay controls>
? ? ?<source src="MP3格式的聲音"> </source>
? ? <source src="ogg格式的聲音"> </source>
? ? <source src="wav格式的聲音"> </source>
? ?</audio>
?
?
4. 代碼：
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document</title>
</head>
<body><p>勵(lì)志視頻</p><embed src='http://player.youku.com/player.php/sid/XMzY4MTIwMTEwNA==/v.swf' allowFullScreen='true' quality='high' width='480' height='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'></embed><!-- 一般視頻特別大時(shí) 我們不選擇直接從本地加載到html 而是先把視頻上傳到優(yōu)酷等然后直接復(fù)制html代碼即可~ --><p>下面是一段很好聽的音樂~</p><audio src="../../sound_video/DaysGoneBy.mp3" autoplay constrols loop="-1"></audio> <br/><br/><br/> <!-- audio標(biāo)簽可以上傳音頻 autoplay 自動(dòng)播放，controls會(huì)顯示聲音控件 loop="2"循環(huán)播放兩次，-1代表無限循環(huán) --><!-- 有的瀏覽器不支持很多mp3格式的聲音，需要考慮兼容性(一般寫上mp3 ogg wav三種即可) --><audio controls autoplay><source src="../../sound_video/DaysGoneBy.mp3"/><source src="另一種格式的聲音.ogg"/><source src="第三種格式的聲音文件.wav"></audio><video src="視頻的地址" autoplay controls></video><!-- 有的瀏覽器不支持某種格式的音頻，可以考慮兼容性的寫法： --><video autoplay controls><source src="mp4格式的視頻地址（我沒有視頻，這里就不演示了）"/><source src="ogg格式的視頻地址（我沒有視頻，這里就不演示了）"/><source src="WebM格式的視頻地址（我沒有視頻，這里就不演示了）"/></video></body>
</html> View Code 運(yùn)行結(jié)果：
?
?
?
轉(zhuǎn)載于:https://www.cnblogs.com/xuanxuanlove/p/10017341.html
總結(jié)
以上是生活随笔為你收集整理的前端学习笔记day01 html 标签之音频 embed+audio+video的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
