1.  <!DOCTYPE html>
  2.  <html lang="en">
  3.  <head>
  4.      <meta charset="UTF-8">
  5.      <title>AV</title>
  6.  </head>
  7.  <body>
  8.      <div class="content">
  9.          <p>注意:audio标签设置controls="controls"才可以再页面中显示</p>
  10.          <p>IE9开始支持</p>
  11.          <div class="audio">
  12.              <audio src="./other/audio.mp3" type="audio/mpeg" controls="controls" autoplay preload="auto" loop>
  13.                  不支持audio
  14.              </audio>
  15.          </div>
  16.          <div class="video">
  17.              <video src="./other/video.mp4" class="video" controls="controls" autoplay preload="metadata" poster="./other/img.jpg" width="500" id="videoElement">
  18.                  不支持video
  19.              </video>
  20.          </div>
  21.          <div class="networkState"></div>
  22.          <button id="getVideoURL">getVideoURL</button>
  23.          <button id="palyVideo">palyVideo</button>
  24.          <button id="pauseVideo">pauseVideo</button>
  25.      </div>
  26.      <script>
  27.          var page = {
  28.              init : function(){
  29.                  this.listener();
  30.              },
  31.              listener : function(){
  32.                  var video = document.getElementById('videoElement');
  33.  
  34.                  //error属性：不能正常读取，使用媒体数据
  35.                  video.addEventListener('error', function(){
  36.                      var error = video.error;
  37.                      switch(error.code){
  38.                          case 1 :
  39.                              alert("视频的下载过程被中止");
  40.                              break;
  41.                          case 2 :
  42.                              alert("网络发生故障，视频的下载过程被中止");
  43.                              break;
  44.                          case 3 :
  45.                              alert('解码失败');
  46.                              break;
  47.                          case 4 :
  48.                              alert("媒体资源不可用或是媒体格式不被支持");
  49.                      }
  50.                  },false);
  51.  
  52.                  //networkState属性:加载过程使用networkState属性读取当前网络状态
  53.                  video.addEventListener('progress',function(e){
  54.                      var networkStateDisplay = document.getElementById('networkState');
  55.                      if(video.networkState === 2){
  56.                          //计算已加载的字节数与总字节数
  57.                          networkStateDisplay.innerHTML = "加载中...[" + e.loaded + "/" + e.total + "byte]";
  58.                      }
  59.                      else if(video.networkState === 3){
  60.                          networkStateDisplay.innerHTML = "加载失败";
  61.                      }
  62.                  },false);
  63.  
  64.                  //使用currentSrc属性：读取媒体数据的URL地址(只读)
  65.                  var videoURL    = video.currentSrc,
  66.                      videoURLBtn = document.getElementById('getVideoURL');
  67.                  videoURLBtn.onclick = function(){
  68.                      //这里是空的，还不知道为什么???
  69.                      console.log(videoURL);
  70.                  }
  71.                  //buffered属性
  72.  
  73.                  //readState属性
  74.  
  75.                  //seeking属性与seekable属性
  76.  
  77.                  //currenTime属性
  78.                  //startTime属性
  79.  
  80.                  //duration属性
  81.  
  82.                  //play属性(开始时间,结束时间)
  83.                  //paused属性(true_暂停，false_播放)
  84.                  //ended属性(true_播放完毕，false_未完毕)
  85.  
  86.                  //defaultPlaybackRate,playbackRate属性
  87.  
  88.                  //volume,muted属性
  89.  
  90.                  /*
  91.                      方法：
  92.                      play(),播放
  93.                      pause(),暂停
  94.                      load(),重新载入
  95.                  */
  96.  
  97.                  //监听视频播放结束事件
  98.                  //注意这里不设置loop循环播放
  99.                  video.addEventListener('ended',function(){
  100.                      alert("播放结束");
  101.                  },true)
  102.  
  103.                  var palyVideoBtn    = document.getElementById('palyVideo'),
  104.                      pauseVideoBtn   = document.getElementById('pauseVideo');
  105.                  //播放视频play()
  106.                  palyVideoBtn.onclick = function(){
  107.                      video.play();
  108.                  }
  109.                  //暂停视频pause()
  110.                  pauseVideoBtn.onclick = function(){
  111.                      video.pause();
  112.                  }
  113.  
  114.                  /*
  115.                      canPlayType方法:
  116.                      空字符串——不支持
  117.                      maybe——可能支持
  118.                      probably：支持
  119.                  */
  120.                  var support = video.canPlayType("video/mp4");
  121.                  console.log(support);//maybe
  122.  
  123.                  /*
  124.                      在媒体读取和播放的过程中，还有一系列的事件。
  125.                      对这些事件的捕捉：
  126.                      (1)监听的方式
  127.                      (2)获取事件句柄
  128.                  */
  129.  
  130.              }
  131.          }
  132.          window.onload = page.init();
  133.      </script>
  134.  </body>
  135.  </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适配移动端px自动转化为rem

    1.下载lib-flexible 我使用的是vue-cli+webpack,所以是通过npm来安装的 npm i lib-flexible --save 2.引入lib-flexible 在main. ...

  2. python epoll方式tcp连接回发消息

    # -*- coding:utf-8 -*- import socket import select class testserver(): def __init__(self): self.serv ...

  3. java连接3种数据库 JdbcLinkDB --201801

    先看这篇记录 java连接3种数据库 JdbcLinkDB 测试 --201801 配置文件放在jar外面 读取,遇到的问题 - 海蓝steven - 博客园https://www.cnblogs.c ...

  4. JAVA学习笔记（4）—— 排序算法

    排序,就是使一串记录,按照其中的某个或某些关键字的大小,递增或递减的排列起来的操作.排序算法,就是如何使得记录按照要求排列的方法. 排序算法大体可分为两种: 一种是比较排序,时间复杂度O(nlogn) ...

  5. sql 常见错误总结

    1.根据一张表更新另一张表的数据. . 写法轻松,更新效率高: update table1 set field1=table2.field1, field2=table2.field2 from ta ...

  6. Matlab imshow, image, imagesc 三者详细分析

    1.显示RGB图像 相同点:这三个函数都是把m*n*3的矩阵中的数值当做RGB值来显示的. 区别:imshow将图像以原始尺寸显示,image和imagesc则会对图像进行适当的缩放(显示出来的尺寸大 ...

  7. hdu 1241 Oil Deposits （简单搜索）

    题目:   The GeoSurvComp geologic survey company is responsible for detecting underground oil deposits. ...

  8. 小程序：navigateBack()修改数据

    1.获取当前页面js里面的pages里的所有信息var pages = getCurrentPages(); 2. -2上一个页面    -3是上上个页面 var prevPage = pages[p ...

  9. 解决vuecli3.0构建的vue2.0项目在IE9可能出现的兼容性问题

    1,unit8Array等未定义问题 解决办法 <1>npm install @babel/polyfill <2>分别在main.js和vuex的主文件 import '@b ...

  10. selenium对百度进行登录注销

    #百度登录退出demo import time from selenium import webdriver from selenium.webdriver.common.action_chains ...