<!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. 迁移虚拟机打开快照报错：CPUID错误

    场景:迁移虚拟机后,恢复快照报错 这个没办法解决,正常启动不会报错,恢复快照有可能报错,是因为你的cpu与快照那个cpu不匹配造成的

  2. Unsafe 的简单使用

    Unsafe 简介 Unsafe 是sun.misc包中的一个类,可以通过内存偏移量操作类变量/成员变量 Unsafe 用途 AQS(AbstractQueuedSynchronizer) 常用作实现 ...

  3. SkyReach 团队团队展示

    班级:软件工程1916|W 作业:团队作业第一次-团队展示 团队名称:SkyReach 目标:展示团队风采,磨合团队 队员姓名与学号 队员学号 队员姓名 个人博客地址 备注 221600107 陈某某 ...

  4. python基础--absl.flags

    之前在tensorflow的mnist例程中看到了使用 absl.flags的方法来载入和解析参数的,出于学习的目的,就自己试验了一下, 代码如下: # *_*coding:utf-8 *_* # a ...

  5. python 对Excel表格的写入

    python对Excel表格写入需要导入xlrd ,和xlutils两个库 from xlrd import open_workbook from xlutils.copy import copy o ...

  6. Niagara帮助文档资料整理

    1.任何软件额发布都会有说明文档,有的不会附具体实践的操作步骤,存在不懂得问题一般可以通过查看榜文文档解决问题 一些软件的帮助文档是一PDF格式存储在软件安装的目录下面,如Niagar workben ...

  7. zabbix_agentd客户端安装与配置(windows操作系统)

    zabbix_agentd客户端安装与配置(windows操作系统)   **********  客户端操作   **********  标注:监控zabbix_agentd客户端安装对象是win s ...

  8. JS & JQuery 动态处理select option

    原文 出处http://www.51xuediannao.com/html+css/htmlcssjq/cssbuhuanhang.html 今天你问了我一个关于在<select>里动态添 ...

  9. 【Idea】idea code style配置eclipse code formatter

    在eclipse中有自动配置code style的功能 ,但是idea上却没有,这个时候需要自己手工配置 1. 在idea中找到Preference->Plugins->Browse re ...

  10. docker-compose yaml mysql和wordpress 一行命令搞定~~~

    version: '3.1' services: db: container_name: db image: mysql/mysql-server restart: always networks: ...