<!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. Linux设置允许指定端口通过防火墙centos7

    开启防火墙 1.systemctl start firewalld.service(开启防火墙) 2.systemctl stop firewalld.service(开启防火墙) 3.service ...

  2. PostgreSQL学习笔记(二)-安装pgAdmin

    继上篇安装PostgreSQL后,我们需要安装一个PostgreSQL的图形化管理工具. pgadmin管理工具 创建Python的虚拟环境 cd /root/venv python -m venv ...

  3. Fiddler之iOS手机抓包实战操作

    准备工作: 1.Fiddler是否安装 2.笔记本的360免费WiFi即可 步骤: 1.官网下载Fiddler并安装 2.打开Fiddler,点击上方Tools,进入Options,选择HTTPS,按 ...

  4. GraphQL ---02 GraphQL和C#结合的实战项目

    本文章是介绍和记录如何创建GraphQL项目,以及如何使用GraphQL进行数据的相关操作.项目参照GraphQL .Net 的官方文档进行实践 一.项目结构: 为了更好的和原有的项目结合在一起,尽可 ...

  5. day20包

    https://www.cnblogs.com/Eva-J/articles/7292109.html 一.模块: 1.什么是模块:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名 ...

  6. 2018-2019-3 20165314《网络对抗技术》Exp2 后门原理与实践

    1.实验内容 任务一:使用netcat获取主机操作Shell 1.在Windows下使用ipconfig查看本机IP: 2.使用ncat.exe程序监听本机的5314端口: 3.在Kali环境下,使用 ...

  7. loadrunner中的web_convert_param函数

    某些场景中获取的参数.自定义参数直接作用于请求的body或url时将不会被特殊的转换为页面编码一致的字符串,导致提交至服务的拼接字符串格式不正确,我们就可以将字符串转为url或html中的格式. 注: ...

  8. Mybatis自定义分布式二级缓存实现与遇到的一些问题解决方案!

    先说两句: 我们都知道Mybatis缓存分两类: 一级缓存(同一个Session会话内) & 二级缓存(基于HashMap实现的以 namespace为范围的缓存) 今天呢, 我们不谈一级缓存 ...

  9. Zabbix （五）

    介绍添加主机时,各个参数的含义 https://blog.51cto.com/5001660/2154692 Zabbix配置介绍: https://blog.51cto.com/5001660/21 ...

  10. python sys.argv[]简单解释

    上一篇UDP编程中简单使用了一些sys模块的argv参数,也是我第一次看见这个参数,这里做个记录: sys.argv是一个从程序外部获取参数的桥梁,这个“外部”很关键, 因为我们从外部取得的参数可以是 ...