HTML5 -video和audio的设置

来源：互联网发布：js 检测div大小变化编辑：程序博客网时间：2024/05/19 10:34

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <!--controls播放页面,autoplay自动播放，loop循环播放-->        <audio id="ad" controls src="img/johann_sebastian_bach_air.mp3" loop></audio>        <!--<video controls id="vd">            <source src="img/Intermission-Walk-in_512kb.mp4" type="video/mp4"></source>            <source src="img/johann_sebastian_bach_air.ogg" type="video/ogg"></source>-->        <!--</video>-->    </body>    <script type="text/javascript">        window.onload = function() {            var oVd = document.getElementById('ad');            //获取当前播放时间            //      setInterval(function(){            //          console.log(oVd.currentTime);            //      },1000);            //设置播放时间从60s后开始            //oVd.currentTime = 60;            //获取总时间            //console.log(oVd.duration);            //alert(oVd.duration);//onload            //获取音量            oVd.volume=0.2;            //console.log(oVd.volume);            //是否静音            oVd.muted=true;            //是否暂停            oVd.paused=true;            //是否结束            //console.log(oVd.ended);            //有没有错误            //console.log(oVd.error);//返回null证明没有错误            //返回播放的路径            console.log(oVd.currentSrc);        }    </script></html>

视频的设置

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>    </head>    <body>        <input type="button" name="btn" id="btn" value="换视频" />        <video controls id="vd">            <source src="img/Intermission-Walk-in_512kb.mp4" type="video/mp4"></source>            <source src="img/johann_sebastian_bach_air.ogg" type="video/ogg"></source>        </video>    </body>    <script type="text/javascript">        window.onload = function() {            var oVd = document.getElementById('vd');            var oBtn=document.getElementById('btn');            var aSource=oVd.getElementsByTagName('source');            //设置视频显示大小            oVd.width=500;            oVd.height=500;            //获取本来的尺寸            console.log(oVd.videoWidth);            console.log(oVd.videoHeight);            //设置封面            //oVd.poster='aa.png';            //鼠标经过视频暂停            oVd.onmouseover=function(){                oVd.pause();            }            //鼠标离开视频播放            oVd.onmouseout=function(){                oVd.play();            }            oBtn.onclick=function(){                aSource[0].src='aa.mp4';                aSource[1].src='aa.ogv';                oVd.load();            }        }    </script></html>

阅读全文

0 0