HTML5中 video和audio这两个标签是干嘛的，如何设置其属性？

 我来答

1个回答

#热议# 普通体检能查出癌症吗？

ldmldmgood
推荐于2017-11-22

知道答主

回答量：9

采纳率：0%

帮助的人：9.5万

我也去答题访问个人页

关注

展开全部

HTML5中的 video和audio这两个标签是HTML5中专门用来播放视频和音频资源的标签。video标签和audio标签也提供了很实用的JavaScript API，允许创建自定义的控件。这两个标签的用法我们通过下面这个示例来进行说明一下。
<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8" />
        <title>video标签和audio标签</title>
    <head>
    <body>
        <h2>video标签的使用</h2>
        
        //使用video标签播放视频Kobe.mp4 其中controls控制是否要显示视频控件
       <h2>使用video标签的API</h2>
        <video src="kobe.mp4" controls="controls" id="video">
            你的破浏览器可以退休了，赶紧升级吧！
        </video>
  
//通过HTML5中Video提供的API 可以自定义控件控制视频的播放
        <br/>
        <input type="button" value="播放" onclick="playVideo()" /> 
        <input type="button" value="停止" onclick="stopVideo()" /> 
        <input type="button" value="快进10秒" onclick="forward()" /> 
        <input type="button" value="快退10秒" onclick="back()" /> <br/>
        <input type="button" value="闭嘴" onclick="shutup(this)" /> 
        <input type="button" value="加速x2" onclick="fast()" /> 
        <input type="button" value="减速x2" onclick="slow()" /> 
        <input type="button" value="正常倍速" onclick="normal()" /> <br/>
   <input type="button" value="大声点" onclick="up()" /> 
        <input type="button" value="小声点" onclick="down()" /> 

        <script>
   
            var video=document.getElementById("video");

            //播放视频
            function playVideo(){
                video.play();
            }

            //停止视频
            function stopVideo(){
                video.pause();
            }

            //快进10秒
            function forward(){
                video.currentTime+=10;
            }

            //快退10秒
            function back(){
                video.currentTime-=10;
            }

            //静音
            function shutup(obj){
                if(video.muted){
                    video.muted=false;
                    obj.value="闭嘴";
                }else{
                    video.muted=true;
                    obj.value="说话";
                }
            }

            //加速x2
            function fast(){
                video.playbackRate=2; //默认播放速度为1
            }

            //减速x2
       function slow(){
                video.playbackRate=1/2;
            }

            //正常倍速
            function normal(){
                video.playbackRate=1;
            }

            //大声点
            function up(){
                video.volume+=0.1; //声音值的范围为0-1
            }

            //小声点
            function down(){
                video.volume-=0.1; //声音值的范围为0-1
            }
        </script>
          //使用audeo标签播放音频wow.mp3 其中controls控制是否要显示视频控件，我们也可以和视频一样自定义控件来控制音频的播放，方法时类似的

        <h2>audio标签的使用</h2>
        <audio src="wow.mp3" controls>
            你的破浏览器可以退休了，赶紧升级吧！
        </audio>
    </body>
</html>
这些都是HTML5中新加入的一些新特性的使用方法。推荐你去一个叫做秒秒学的网站上去查找相关的课程资料。


本回答被提问者采纳






已赞过已踩过<

你对这个回答的评价是？
评论收起

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

HTML5中 video和audio这两个标签是干嘛的，如何设置其属性？

其他类似问题

为你推荐：