美文网首页
浅谈HTML5中video和audio

浅谈HTML5中video和audio

作者: itdingrui | 来源:发表于2016-11-28 21:02 被阅读0次

(1)video视频:引video的方法类似img,使用src引视频地址,controls  显示控件;autoplay自动播放;loop单曲循环;视频类型ogg,mp4(一般多用MP4)。

1.简单引用video:其中只引入video的情况下,鼠标右键点击显示控件即可播放。

2.添加适当的控制代码,可调 的代码有两种方式

① 在内部引入src的视频地址

```

              <video src="bbb.ogg" controls autoplay loop width="500" height="300"></video>

```

② 在代码内部添加 source 引入视频地址 

···

<video controls autoplay loop width="500" height="400" >

          <source src="1.mp4"/>

</video>

···

注意:其中一定要设置宽和高,这样才会有视频。默认状态下是无宽高的。

3.video 可以使用js更好的完善控制,例如变大,变小,暂停,播放,暂停/播放,全屏

```

    <script>

    window.onload= function(){

             var aBtn = document.getElementsByTagName('input');

              var oV = document.getElementById('v1');

                  //变大800*600

               aBtn[0].onclick = function(){

                        oV.width = 800;

                        oV.height = 600;

                }

             //变小

               aBtn[1].onclick = function(){

                       oV.width = 200;

                       oV.height = 200;

             }

           //播放

             aBtn[2].onclick = function(){

                       oV.play();

             }

           //暂停

             aBtn[3].onclick = function(){

                     oV.pause();

            }

            aBtn[4].onclick = function(){

                  if(oV.paused){

                      oV.play();

                   }else{

                       oV.pause();

                    }

            }

            aBtn[ 5].onclick=function(){

                 oV.webkitRequestFullScreen();

            }

   };

   </script>

   <body>

                    <input type="button" value="变大" />

                    <input type="button" value="变小" />

                     <input type="button" value="播放"/>

                     <input type="button" value="暂停"/>

                     <input type="button" value="暂停/播放"/>

                     <input type="button" value="全屏" />

    </body>

```

(2)audioy:音频。使用方法大致和video很像,controls显示控件一定得添,否则不显示看不见

   例如简单引入音频文件

    <audio src="yhdj.mp3" controls autoplay loop></ audio>

相关文章

  • html5影音多媒体(video和audio)的简单介绍

    video元素与audio元素 1、video元素与audio元素的基础知识video元素--在HTML5中专门用...

  • 浅谈HTML5中video和audio

    (1)video视频:引video的方法类似img,使用src引视频地址,controls 显示控件;autopl...

  • HTML5的新特性

    HTMl5中的部分有趣的新特性: canvas: 用于绘画(很厉害,只是学习成本高) video和audio: 用...

  • 关于HTML5的audio标签和video标签删除下载图标

    关于HTML5的audio标签和video标签删除下载图标 - a+b!=c - 博客园 设置css video:...

  • HTML5拓展笔记

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元...

  • HTML5学习笔记

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元...

  • HTML5

    HTML5 中的一些有趣的新特性: 用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元...

  • H5视频播放

    html5新增了音频/视频(audio/video)的API。这次我们先来了解video。video 元素支持三种...

  • html5,css3新特性

    html5: 用于绘画的 canvas 元素 以及SVG 用于媒介回放的 video 和 audio 元素 拖拽(...

  • audio 与 video

    HTML5增加了audio(音频)和video(视频)两个标签,不用再像以前那样使用插件去播放音频和视频audio...

网友评论

      本文标题:浅谈HTML5中video和audio

      本文链接:https://www.haomeiwen.com/subject/ftoopttx.html