<!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. css3混合模式

    https://juejin.im/entry/5b4802d15188251ac446d3a9

  2. EXCEL上传POI

    Java SpringMVC POI上传excel并读取文件内容 2017年11月27日 15:26:56 强人锁男. 阅读数:15329   用的SSM框架,所需要的jar包如图所示:,链接地址:j ...

  3. PHP笔记：单引号与双引号区别

    PHP笔记:单引号与双引号区别 php中使用字符串时,可以使用单引号或者双引号,这里总结一下二者的不同: 一.解析字符内容 双引号中的变量会会经过编译器解析 单引号中的变量不会被解析 如下: < ...

  4. 如何在submit上运行php文件

    一..把php加入到环境变量 二.在sublmie中新建编译系统 三.添加一下代码,修改成php当前的目录地址,保存在默认的路径下,命名为php.sublime-build { "cmd&q ...

  5. mingw-gcc-9.0.1-i686-posix-sjlj-201903

    -------------------------------------------------------------------------------gcc version 9.0.1 201 ...

  6. java - day003 - 循环嵌套, 循环命名, while, 数组

    1.循环嵌套 break 中断循环或switch(跳出循环).中断后继续往下执行 continue (跳到循环的下一轮继续执行) return (结束方法) 2.循环命名 内层循环控制外层循环.需要给 ...

  7. P4391 [BOI2009]Radio Transmission 无线传输(KMP)

    题目描述 给你一个字符串,它是由某个字符串不断自我连接形成的. 但是这个字符串是不确定的,现在只想知道它的最短长度是多少. 输入输出格式 输入格式: 第一行给出字符串的长度,1 < L ≤ 1, ...

  8. 算法工程师<编程题>

    <编程题> 1.[Maximum Product Subarray 求最大子数组乘积] 这个求最大子数组乘积问题是由最大子数组之和问题演变而来,但是却比求最大子数组之和要复杂,因为在求和的 ...

  9. php 获取用户的IP、地址、来源

    js方法获取用户的 ip 和 地址 <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> ...

  10. 语法之进化论之lambda表达式

    namespace 匿名函数 { /// <summary> /// 语法之进化论 /// </summary> class Program { delegate bool M ...