<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>AV</title>

 </head>

 <body>

     <div class="content">

         <p>注意:audio标签设置controls="controls"才可以再页面中显示</p>

         <p>IE9开始支持</p>

         <div class="audio">

             <audio src="./other/audio.mp3" type="audio/mpeg" controls="controls" autoplay preload="auto" loop>

                 不支持audio

             </audio>

         </div>

         <div class="video">

             <video src="./other/video.mp4" class="video" controls="controls" autoplay preload="metadata" poster="./other/img.jpg" width="500" id="videoElement">

                 不支持video

             </video>

         </div>

         <div class="networkState"></div>

         <button id="getVideoURL">getVideoURL</button>

         <button id="palyVideo">palyVideo</button>

         <button id="pauseVideo">pauseVideo</button>

     </div>

     <script>

         var page = {

             init : function(){

                 this.listener();

             },

             listener : function(){

                 var video = document.getElementById('videoElement');

                 //error属性：不能正常读取，使用媒体数据

                 video.addEventListener('error', function(){

                     var error = video.error;

                     switch(error.code){

                         case 1 :

                             alert("视频的下载过程被中止");

                             break;

                         case 2 :

                             alert("网络发生故障，视频的下载过程被中止");

                             break;

                         case 3 :

                             alert('解码失败');

                             break;

                         case 4 :

                             alert("媒体资源不可用或是媒体格式不被支持");

                     }

                 },false);

                 //networkState属性:加载过程使用networkState属性读取当前网络状态

                 video.addEventListener('progress',function(e){

                     var networkStateDisplay = document.getElementById('networkState');

                     if(video.networkState === 2){

                         //计算已加载的字节数与总字节数

                         networkStateDisplay.innerHTML = "加载中...[" + e.loaded + "/" + e.total + "byte]";

                     }

                     else if(video.networkState === 3){

                         networkStateDisplay.innerHTML = "加载失败";

                     }

                 },false);

                 //使用currentSrc属性：读取媒体数据的URL地址(只读)

                 var videoURL    = video.currentSrc,

                     videoURLBtn = document.getElementById('getVideoURL');

                 videoURLBtn.onclick = function(){

                     //这里是空的，还不知道为什么???

                     console.log(videoURL);

                 }

                 //buffered属性

                 //readState属性

                 //seeking属性与seekable属性

                 //currenTime属性

                 //startTime属性

                 //duration属性

                 //play属性(开始时间,结束时间)

                 //paused属性(true_暂停，false_播放)

                 //ended属性(true_播放完毕，false_未完毕)

                 //defaultPlaybackRate,playbackRate属性

                 //volume,muted属性

                 /*

                     方法：

                     play(),播放

                     pause(),暂停

                     load(),重新载入

                 */

                 //监听视频播放结束事件

                 //注意这里不设置loop循环播放

                 video.addEventListener('ended',function(){

                     alert("播放结束");

                 },true)

                 var palyVideoBtn    = document.getElementById('palyVideo'),

                     pauseVideoBtn   = document.getElementById('pauseVideo');

                 //播放视频play()

                 palyVideoBtn.onclick = function(){

                     video.play();

                 }

                 //暂停视频pause()

                 pauseVideoBtn.onclick = function(){

                     video.pause();

                 }

                 /*

                     canPlayType方法:

                     空字符串——不支持

                     maybe——可能支持

                     probably：支持

                 */

                 var support = video.canPlayType("video/mp4");

                 console.log(support);//maybe

                 /*

                     在媒体读取和播放的过程中，还有一系列的事件。

                     对这些事件的捕捉：

                     (1)监听的方式

                     (2)获取事件句柄

                 */

             }

         }

         window.onload = page.init();

     </script>

 </body>

 </html>

H5_ 多媒体video，autio使用示例的更多相关文章

  1. html5多媒体Video/Audio

    video:    1.常见的视频格式 视频的组成部分:画面.音频.编码格式 视频编码:H.264.theora.VP8(google开源)      2.常见的音频格式     编码:AAC.MP3 ...

  2. flask的模板引擎jinja入门教程 包含一个通过网络实时传输Video视频流的示例

    本文首发于个人博客https://kezunlin.me/post/1e37a6/,欢迎阅读最新内容! tutorial to use python flask jinja templates and ...

  3. HTML5新标签与特性---多媒体

    多媒体标签 embed:标签定义嵌入的内容 audio:播放音频 video:播放视频 多媒体 embed(会使用) embed可以用来插入各种多媒体,格式可以是 Midi.Wav.AIFF.AU.M ...

  4. css知识总结

    ---# 学习目标:> 1. 学会使用CSS选择器> 2. 熟记CSS样式和外观属性> 3. 熟练掌握CSS各种选择器> 4. 熟练掌握CSS各种选择器> 5. 熟练掌握 ...

  5. H5新标签(适合新手入门)

    H5新标签 文档类型设定 document HTML: sublime 输入 html:4s XHTML: sublime 输入 html:xt HTML5 sublime 输入 html:5 < ...

  6. HTML超全笔记

    HTML概述 概念:是最基础的网页开发语言 Hyper Text Markup Language 超文本标记语言 超文本: 超文本是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本. 标记 ...

  7. 前端基础-HTML(2)

    1. 什么是标签以及标签的分类: 在HTML页面中,带有“< >”符号的元素被称为HTML标签,如上节提到的 <HTML>.<head>.<body>都 ...

  8. 蒲公英 · JELLY技术周刊 Vol.35: Flash 四宗罪？

    蒲公英 · JELLY技术周刊 Vol.35 Flash 曾是 Web 迈向新世代的福音书,它为这个世界带来了缤纷色彩,但也如伊甸园的苹果,闪耀着智慧的光芒,却四灾随行.诞生 1995 年至今 25 ...

  9. html5 新增标签和特性

    文档类型设定 document HTML: XHTML: HTML5 字符设定 <meta http-equiv="charset" content="utf-8& ...

随机推荐

  1. vue swiper中的大坑

    mounted() { var self = this; for (var i = 0; i < self.$refs.mySwiper.swiper.pagination.bullets.le ...

  2. SHOT

  3. Razor Page 文件

    Razor Pages 所有的Razor文件都以 .cshtml 结尾.大部分Razor文件都是可浏览的,包含客户端代码和服务器端代码的混合,处理后会将HTML发送到浏览器.这些页面通常被称为“内容页 ...

  4. 实践笔记_J2EE_Server_Tomcat_tomcat域名绑定_1_单域名绑定

                                                                      Tomcat域名绑定(1)单域名绑定 1. 测试环境说明 名称 版本 ...

  5. IntelliJ IDEA 如何设置类头注释和方法注释

    从VS转过来的,ide的差距很大的,所以...特意折腾了很久,结果还是没有VS的 '///' 好用 一.类头注释 打开file -> setting -> Editor -> Fil ...

  6. Oracle 去特殊字符

    Create Or Replace Function Zl_Fun_去特殊字符(内容_In In Varchar2) Return Varchar2 IsBegin Return Replace(Re ...

  7. ASP.NET Core MVC 授权的扩展：自定义 Authorize Attribute 和 IApplicationModelProvide

    一.概述 ASP.NET Core MVC 提供了基于角色( Role ).声明( Chaim ) 和策略 ( Policy ) 等的授权方式.在实际应用中,可能采用部门( Department , ...

  8. 谷歌浏览器F12基本用法

    第一步:打开你想进行调试的页面,并按F12进入到调试模式 此处以百度页面为例进行功能展示 这是关于最右侧“元素选择器”的功能展示 关于第二个功能的使用,这个功能是将页面适应成手机屏幕大小, eleme ...

  9. 基于Emgucv,C#的图片旋转方式

    /// <summary> /// 图片旋转 --百度 旋转仿射 /// </summary> /// <param name="modelImage" ...

  10. 8080端口被System占用

    System是Windows页面内存管理进程,拥有0级优先权,没有它系统无法启动 就是说,System进程是无法关闭的,所以不要尝试去强行关闭,可能引起电脑异常查看是否是IIS占用的, 进入电脑控制面 ...