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

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

已邀请:

ooxx1457

赞同来自:

video视频标签和audio音频标签

lybkf

赞同来自:

video是定义视频的
audio是定义音频的
具体属性设置可以看这里
http://www.w3school.com.cn/ht...
http://www.w3school.com.cn/ht...

duzhenggis

赞同来自:

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中新加入的一些新特性的使用方法。推荐你去一个叫做秒秒学的网站上去查找相关的课程资料。

要回复问题请先登录注册