HTML5 -video和audio的设置

最新推荐文章于 2023-04-19 14:23:46 发布

sweetllh

最新推荐文章于 2023-04-19 14:23:46 发布

阅读量705

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/sweetllh/article/details/76316512

版权

html5 专栏收录该内容

16 篇文章 3 订阅

订阅专栏

<!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>

sweetllh

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5 -video和audio的设置

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <body>  <audio id="ad" controls src="img/
复制链接

扫一扫