知向前端
首页
微语
登录
html5视频音频标签使用&&使用视频做背景
2015-5-13 Jon
html5视频音频标签使用
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <meta http-equiv="X-UA-Compatible" content="ie=edge"><br /> <title>html5视频音频标签使用</title><br /> </head><br /> <body><br /> <hr />使用video的API<br /><br /> <video src="https://gitee.com/yinuocode/blogsImg/raw/master/video/bj.mp4" controls="controls" id="video"><br /> 你的浏览器可以换了<br /> </video><br /> <br /><br /> <button onclick="bozan(this)">播放</button><br /> <button onclick="kuaijin()">快进10秒</button><br /> <button onclick="kuaitui()">快退10秒</button><br /> <button onclick="shutup(this)">静音</button><br /> <button onclick="soso()">加速播放</button><br /> <button onclick="yu()">减速播放</button><br /> <button onclick="normal()">正常播放</button><br /> <button onclick="upper()">声音++</button><br /> <button onclick="lower()">声音--</button><br /> <script><br /> // 获取对应的video标签<br /> var video=document.getElementById('video');<br /> //播放方法<br /> function bozan(obj){<br /> if(video.paused){<br /> video.play();<br /> obj.innerHTML="暂停";<br /> }else{<br /> video.pause();<br /> obj.innerHTML="播放";<br /> }<br /> }<br /> //静音按钮<br /> function shutup(obj){<br /> if(video.muted){<br /> obj.innerHTML="静音";<br /> video.muted=false;<br /> }else{<br /> obj.innerHTML="声音";<br /> video.muted=true;<br /> }<br /> }<br /> //快进10秒<br /> function kuaijin(){<br /> video.currentTime+=10;<br /> }<br /> //快退10秒<br /> function kuaitui(){<br /> video.currentTime-=10;<br /> }<br /> //加速播放(3倍速度)<br /> function soso(){<br /> video.playbackRate=3;<br /> }<br /> //慢速播放(慢三倍)<br /> function yu(){<br /> video.playbackRate=1/3;<br /> }<br /> //正常倍速<br /> function normal(){<br /> video.playbackRate=1;//默认的播放倍速是1<br /> }<br /> //调高声音<br /> function upper(){<br /> video.volume+=0.2;//声音值的范围是0-1<br /> }<br /> //调低声音<br /> function lower(){<br /> video.volume-=0.2;<br /> }<br /> </script><br /> <hr />音频标签的使用<br /><br /> <audio src="https://gitee.com/yinuocode/blogsImg/raw/master/audio/zaijian.mp3" controls="controls"><br /> 你的浏览器可以换了<br /> </audio><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看
使用视频做网页背景，记录中国十二大优美诗词
<br /> <!DOCTYPE html><br /> <html lang="en"><br /> <head><br /> <meta charset="UTF-8"><br /> <meta name="viewport" content="width=device-width, initial-scale=1.0"><br /> <meta http-equiv="X-UA-Compatible" content="ie=edge"><br /> <title>使用视频做网页背景，记录中国十二大优美诗词</title><br /> <style><br /> *{margin:0;padding:0;}<br /> /*清除浮动代码*/<br /> .clearfix:before, .clearfix:after {<br /> display: table;<br /> content: " ";<br /> }<br /> .clearfix:after {<br /> clear: both;<br /> }<br /> .clearfix {<br /> *zoom: 1;<br /> }<br /> #bgvid {<br /> position: fixed;<br /> right: 0;<br /> bottom: 0;<br /> min-width: 100%;<br /> min-height: 100%;<br /> z-index: -100;<br /> background: url(https://gitee.com/yinuocode/blogsImg/raw/master/img/bj.png) no-repeat;<br /> background-size: cover;<br /> }<br /> .wrap{<br /> margin:0 auto;<br /> z-index: 1;<br /> width: 1200px;<br /> background: rgba(3,3,3,.6);<br /> }<br /> .item{<br /> color: #013A01;<br /> font-weight: bold;<br /> text-align: center;<br /> font-size: 20px;<br /> line-height: 30px;<br /> float:left;<br /> margin:25px;<br /> padding:30px 15px;<br /> width: 320px;<br /> height:420px;<br /> background: rgba(200,200,200,.6);<br /> }<br /> .read{padding:6px;border-radius: 5px;position: fixed;top:5px;right:5px;color:green;}<br /> </style><br /> </head><br /> <body><br /> <button id="read" class="read">阅读模式</button><br /> <div class="wrap clearfix"><br /> <div class="item">相见欢<br /><br /> （五代）李煜<br /><br /> 无言独上西楼，<br /><br /> 月如钩，<br /><br /> 寂寞梧桐深院锁清秋。<br /><br /> 剪不断，理还乱，是离愁。<br /><br /> 别是一般滋味在心头。<br /> </div><br /> <div class="item">破阵子<br /><br /> 为陈同甫赋壮语以寄<br /><br /> （南宋）辛弃疾<br /><br /> 醉里挑灯看剑，梦回吹角连营。<br /><br /> 八百里分麾下炙，五十弦翻塞外声。<br /><br /> 沙场秋点兵。<br /><br /> 马作的卢飞快，弓如霹雳弦惊。<br /><br /> 了却君王天下事，赢得生前身后名。<br /><br /> 可怜白发生。<br /> </div><br /> <div class="item">雨霖铃 柳永<br /><br /> 寒蝉凄切。对长亭晚，<br /><br /> 骤雨初歇。 都门帐饮无绪，<br /><br /> 留恋处、兰舟催发。<br /><br /> 执手相看泪眼，竟无语凝噎。<br /><br /> 念去去、千里烟波，<br /><br /> 暮霭沉沉楚天阔。<br /><br /> 多情自古伤离别。<br /><br /> 更那堪、冷落清秋节。<br /><br /> 今宵酒醒何处，杨柳岸、<br /><br /> 晓风残月。此去经年，<br /><br /> 应是良辰好景虚设。<br /><br /> 便纵有千种风情，更与何人说。<br /> </div><br /> <div class="item">鹊桥仙·纤云弄巧<br /><br /> （北宋）秦观<br /><br /> 纤云弄巧，飞星传恨，银汉迢迢暗度。<br /><br /> 金风玉露一相逢，便胜却人间无数。<br /><br /> 柔情似水，佳期如梦，忍顾鹊桥归路。<br /><br /> 两情若是久长时，又岂在朝朝暮暮。<br /> </div><br /> <div class="item">江城子<br /><br /> 乙卯正月二十日夜记梦<br /><br /> 宋 苏轼<br /><br /> 十年生死两茫茫。<br /><br /> 不思量，自难忘。<br /><br /> 千里孤坟，无处话凄凉。<br /><br /> 纵使相逢应不识，尘满面，鬓如霜。<br /><br /> 夜来幽梦忽还乡。<br /><br /> 小轩窗。正梳妆。<br /><br /> 相顾无言，惟有泪千行。<br /><br /> 料得年年肠断处，明月夜，短松冈。<br /> </div><br /> <div class="item">《卜算子·我住长江头》<br /><br /> （北宋）李之仪<br /><br /> 我住长江头，君住长江尾。<br /><br /> 日日思君不见君，共饮一江水。<br /><br /> 此水几时休? 此恨何时已? <br /><br /> 只愿君心似我心， 定不负相思意。<br /> </div><br /> <div class="item">《摸鱼儿·雁丘词》<br /><br /> 金末元初 元好问<br /><br /> 问世间，情为何物，直教生死相许？<br /><br /> 天南地北双飞客，老翅几回寒暑。<br /><br /> 欢乐趣，离别苦，就中更有痴儿女。<br /><br /> 君应有语：渺万里层云，<br /><br /> 千山暮雪，只影向谁去？<br /><br /> 横汾路，寂寞当年箫鼓，<br /><br /> 荒烟依旧平楚。<br /><br /> 招魂楚些何嗟及，山鬼暗啼风雨。<br /><br /> 天也妒，未信与，莺儿燕子俱黄土。<br /> </div><br /> <div class="item">水调歌头<br /><br /> （北宋）苏轼<br /><br /> 明月几时有，把酒问青天。<br /><br /> 不知天上宫阙，今夕是何年？<br /><br /> 我欲乘风归去，<br /><br /> 又恐琼楼玉宇，高处不胜寒。<br /><br /> 起舞弄清影，何似在人间。<br /><br /> 转朱阁，低绮户，照无眠。<br /><br /> 不应有恨，何事长向别时圆？<br /><br /> 人有悲欢离合，<br /><br /> 月有阴晴圆缺，此事古难全。<br /><br /> 但愿人长久，千里共婵娟 。<br /> </div><br /> <div class="item">白海棠 <br /><br /> 半卷湘帘半掩门,<br /><br /> 碾冰为土玉为盆. <br /><br /> 偷来梨蕊三分白,<br /><br /> 借得梅花一缕魂. <br /><br /> 月窟仙人缝缟袂,<br /><br /> 秋闺怨女试啼痕.<br /> <br /><br /> 娇羞默默同谁诉,<br /><br /> 倦倚西风夜已昏.<br /> </div><br /> <div class="item">七绝 <br /><br /> 黄昏雨落一池秋,<br /><br /> 晚来风向万古愁. <br /><br /> 不厌浮生唯是梦,<br /><br /> 缘求半世但无俦. <br /><br /> 一颦一笑一伤悲,<br /><br /> 一生痴迷一世醉.<br /> <br /><br /> 一磋一叹一轮回,<br /><br /> 一寸相思一寸灰.<br /> </div><br /> <div class="item">浪淘沙(李煜) <br /><br /> 帘外雨潺潺,春意将阑<div class="br"></div>罗衾不耐五更寒. <br /><br /> 梦里不知身是客,一晌贪欢. <br /><br /> 独自莫凭栏,无限江山,<br /><br /> 别时容易见时难. <br /><br /> 流水落花春去也,天上人间.<br /> </div><br /> <div class="item">一剪梅 （唐寅） <br /><br /> 雨打梨花深闭门. <br /><br /> 忘了青春,误了青春. <br /><br /> 赏心乐事共谁论? <br /><br /> 花下销魂,月下销魂. <br /><br /> 愁聚眉峰尽日颦.<br /> <br /><br /> 千点啼痕,万点啼痕. <br /><br /> 晓看天色暮看云. <br /><br /> 行也思君,坐也思君.<br /> </div><br /> </div><br /> <video src="https://gitee.com/yinuocode/blogsImg/raw/master/video/bj.mp4" poster="https://gitee.com/yinuocode/blogsImg/raw/master/img/bj.png" id="bgvid" loop autoplay><br /> 请跟新你的浏览器观看<br /> </video><br /> <script><br /> (function(){<br /> //获取对应的video标签<br /> var oVideo=document.getElementById('bgvid');<br /> var oRead=document.getElementById('read');<br /> //静音按钮<br /> oRead.onclick=function(){<br /> if(oVideo.muted){<br /> this.innerHTML="阅读模式";<br /> oVideo.muted=false;<br /> }else{<br /> this.innerHTML="浏览模式";<br /> oVideo.muted=true;<br /> }<br /> }<br /> })();<br /> </script><br /> </body><br /> </html><br />
运行代码
您可以修改框中代码后运行查看