html5媒体学习小结

作者: Simon海明月 | 来源:发表于2017-12-27 07:29 被阅读0次

html5媒体学习小结
HTML5学习笔记之表格标签
HTML5学习笔记之表单标签
HTML5学习笔记之基础标签
HTML5学习笔记之音视频标签
HTML5基本介绍
HTML入门--浅谈HTML和HTML5有什么区别？
小羊教程——HTML5多媒体标签
html5常见问题
HTML5小结

audio/video具有如下自带的属性

controls 自带的属性显示控件
autoplay 自动播放
loop （弯曲，回路）结束时重新播放
preload (预先加载)
src 要播放的音频地址
source 拥有两份源文件的音频播放器。浏览器应该选择它所支持的文件（如果有的话）
具有的属性：
duration：属性返回当前音频/视频的长度，以秒计。
currentTime：（流动的时间）返回已播放的事件,在javaScript中，可以设置currentTime的时间。

<body>
    <audio src="johann_sebastian_bach_air.mp3" controls autoplay id="au"></audio>
    <video src="Intermission-Walk-in_512kb.mp4" controls>
            您的浏览器不支持video请升级浏览器  
    </video>
    <script>
        window.onload = function(){
            var au = document.getElementById('au');
            console.log(au.duration)
            setInterval(function(){
                console.log(au.currentTime);
            },1000)
        }
    </script>
</body>

paused (暂停)属性返回音频/视频是否已暂停。返回值是布尔值。
ended （结束）属性返回音频/视频是否结束。返回值是布尔值。
currentSrc（流动地址）属性返回音频/视频的地址。字符串。
poster 为播放器添加海报图片

下面写一个小例子：

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        li{
            list-style: none;
            margin:0;
            padding:0;
            float:left;
            background: #ccc;
            cursor: pointer;
            width: 80px;
            height: 30px;
            border:1px solid #000;
            line-height: 30px;
            text-align: center;
        }
        li.active{
            background: red;
        }
    </style>
</head>
<body>
    <audio id="au"></audio>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
    </ul>
    <script>
        window.onload = function(){
            var ali = document.getElementsByTagName('li');
            var au = document.getElementById('au');
            var arr = ["a","b","c","d","e","f","g"];
            for(var i=0;i<ali.length;i++){
                ali[i].index = i;
                ali[i].onmouseover = function(){
                    for(var i=0;i<ali.length;i++){
                        ali[i].className = "";
                    }
                    au.src="http://s8.qhimg.com/share/audio/piano1/"+arr[this.index]+"4.mp3";
                    
                    this.className = "active";
                    au.play();
                }
            }
        }
    </script>
</body>

THE END