2021-04-22

音频、视频

//h5新增标签
    <Header>我是头部</Header>
    <Nav>我是导航</Nav>
    <Article>我是文章</Article>
    <Section>我是章节</Section>
    <Aside>一个链接</Aside>
    <Footer>我是页脚</Footer>
// input的h5增强 
    <form action="">
        <input type="search" placeholder="我是搜索框">
        <input type="tel" placeholder="我是电话号码" maxlength="11" parttern="">
        <input type="url" placeholder="我是链接">
        <input type="email" placeholder="我是emil">
        <input type="date" placeholder="我是日期">
        <input type="color" placeholder="我是颜色">
        <input type="number" placeholder="我是数字">
        <input type="range" placeholder="我是滑块">
        <input type="text" autofocus>
        <input type="submit">
    </form>
//新元素
    <progress value="20" max="100"></progress>
    <meter value="0.6"></meter>
    <meter value="3" min="0" max="100"></meter>
    <p contenteditable="true" placeholder="我可以编辑"></p>
  	//音频
  	controls:
  	autoplays:
  	loop:
  	preload:
  	volum
  	
    <div id="SourcePlay">
        <audio id="audio" autoplay="true" controls>
            <source :src="url()"> 
        </audio>
        <p>

            <button id="btnPlay" value="play">play</button>
            <button id="btnPause" value="pause">pause</button>
            <button id="next" @click="next">next</button>
        </p>
    </div>
    
    <script>
        var audio = document.getElementById("audio")
            var source = audio.getElementsByTagName("source")
            document.getElementById("btnPlay").addEventListener("click", function() {
                // source[0].src = "http://music.163.com/song/media/outer/url?id=1383923130.mp3"
                audio.play()
            })
            document.getElementById("btnPause").addEventListener("click", function() {
                audio.pause()
            })
     </script>