<!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. Grunt 一个专为JavaScript提供的构建工具

    新手最好找个视频来看看, Grunt的配置及使用(压缩合并js/css) - 每天都记录一点点! - CSDN博客https://blog.csdn.net/playboyanta123/articl ...

  2. 2018-2019-2 网络对抗技术 20165325 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165325 Exp3 免杀原理与实践 实验内容(概要) 一.正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己 ...

  3. git知识总结-1.git基础之git reference

    1.前言 Git版本管理的内容,是一系列由40bytes SHA-1字符串所代表patch,而Git References,则是对这些字符串的引用(也可以理解为别名).为什么需要别名呢?因为这些字符串 ...

  4. sed 删除文本

    sed删除文本命令可以将指定行或指定行范围进行删除,sed编辑命令的删除文本符号为 d,删除文本的格式为. [ sed]$ cat input [ sed]$ sed '/8/d' input 删除最 ...

  5. python学习：一

    第三章:实践题作业 1.编写一个名为 collatz()的函数,它有一个名为 number 的参数.如果参数是偶数,那么 collatz()就打印出 number // 2, 并返回该值.如果 num ...

  6. MUI底部导航切换子页面

    1.登陆页面进入之后,进入到main页面,main页面只有一个底部导航,然后引入子页面进行渲染. <nav class="mui-bar mui-bar-tab" id=&q ...

  7. vue交互

    1)如果vue想做交互,本身的框架是不支持的,需要引入vue-resurce库交互方式:get.post.jsonp 1.get方式methods: {    get: function () { / ...

  8. 基于keil平台下STM32L系列移植FreeRTOS操作系统

    1,下载FreeRTOS https://www.freertos.org/a00104.html 点击下载后,会进入如下界面 之后会弹出下载界面,格式为.EXE,不用怀疑.不是木马. 等待下载完成, ...

  9. Gradle 同步时报错，Could not find com.android.support.constraint:constraint-layout:1.0.0-alpha8的解决方法

    Error:Could not find com.android.support.constraint:constraint-layout:1.0.0-alpha8. 原因: SDK 中可能是没有安装 ...

  10. MVC Bundle生成的css路径问题

    项目是嵌套在主站的一个子站点,结果用CssRewriteUrlTransform来将相对目录路径改成相对网站根目录路径的时候发现少了虚拟目录的路径.最终解决方案: /// <summary> ...