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
 53                 //networkState属性:加载过程使用networkState属性读取当前网络状态
 54                 video.addEventListener('progress',function(e){
 55                     var networkStateDisplay = document.getElementById('networkState');
 56                     if(video.networkState === 2){
 57                         //计算已加载的字节数与总字节数
 58                         networkStateDisplay.innerHTML = "加载中...["   e.loaded   "/"   e.total   "byte]";
 59                     }
 60                     else if(video.networkState === 3){
 61                         networkStateDisplay.innerHTML = "加载失败";
 62                     }
 63                 },false);
 64
 65                 //使用currentSrc属性：读取媒体数据的URL地址(只读)
 66                 var videoURL    = video.currentSrc,
 67                     videoURLBtn = document.getElementById('getVideoURL');
 68                 videoURLBtn.onclick = function(){
 69                     //这里是空的，还不知道为什么???
 70                     console.log(videoURL);
 71                 }
 72                 //buffered属性
 73
 74                 //readState属性
 75
 76                 //seeking属性与seekable属性
 77
 78                 //currenTime属性
 79                 //startTime属性
 80
 81                 //duration属性
 82
 83                 //play属性(开始时间,结束时间)
 84                 //paused属性(true_暂停，false_播放)
 85                 //ended属性(true_播放完毕，false_未完毕)
 86
 87                 //defaultPlaybackRate,playbackRate属性
 88
 89                 //volume,muted属性
 90
 91                 /*
 92                     方法：
 93                     play(),播放
 94                     pause(),暂停
 95                     load(),重新载入
 96                 */
 97
 98                 //监听视频播放结束事件
 99                 //注意这里不设置loop循环播放
100                 video.addEventListener('ended',function(){
101                     alert("播放结束");
102                 },true)
103
104                 var palyVideoBtn    = document.getElementById('palyVideo'),
105                     pauseVideoBtn   = document.getElementById('pauseVideo');
106                 //播放视频play()
107                 palyVideoBtn.onclick = function(){
108                     video.play();
109                 }
110                 //暂停视频pause()
111                 pauseVideoBtn.onclick = function(){
112                     video.pause();
113                 }
114
115                 /*
116                     canPlayType方法:
117                     空字符串——不支持
118                     maybe——可能支持
119                     probably：支持
120                 */
121                 var support = video.canPlayType("video/mp4");
122                 console.log(support);//maybe
123
124                 /*
125                     在媒体读取和播放的过程中，还有一系列的事件。
126                     对这些事件的捕捉：
127                     (1)监听的方式
128                     (2)获取事件句柄
129                 */
130
131             }
132         }
133         window.onload = page.init();
134     </script>
135 </body>
136 </html>

H5_ 多媒体video，autio使用示例相关推荐

  1. MIME媒体类型：简介，作用（描述并标记多媒体内容），示例

    **MIME媒体类型(简称MIME类型)**是描述报文实体主体内容的一些标准化名称(比如,text/html.image/jpeg). 因特网有数千种不同的数据类型,HTTP仔细地给每种要通过web传 ...

  2. Moviepy时间变换time_mirror再遇‘OSError: MoviePy error: failed to read the first frame of video file‘解决示例代码

    ☞ ░ 老猿Python博文目录:https://blog.csdn.net/LaoYuanPython ░ 一.引言 在<https://blog.csdn.net/LaoYuanPython ...

  3. JS自定义多媒体Video控制条（控制视频播放、进度、全屏案例）

    案例参考 先来看一下一些视屏控件 需求 点击按钮实现视频的播放和暂停 按钮切换全屏和退出全屏功能 进度条和时间 前期准备 HTML DOM Video 对象文档 图标字体库下载和文档 案例目录 HTM ...

  4. opencv笔记（三十三）——Video Capture使用示例。读取视频

    这次通过一个读取视频的综合例子来介绍VideoCapture类的一些基本操作: #include <opencv2/core/core.hpp> #include <opencv2/ ...

  5. springboot + vue3实现视频播放Demo（video.js Vue3-video-play视频播放器）

    文章目录 学习链接 前言 ffmpeg 安装ffmpeg 配置环境变量 分割视频文件 后台配置 WebConfig 前端代码 video.js示例 安装依赖 视频播放组件 效果 Vue3-video- ...

  6. JavaScript（三十七）——移动端、多媒体、CSS动画

    目录 移动端基础 手机浏览器的内核是什么? 四大浏览器内核优缺点 视口viewport rem 多媒体 视频格式 声音格式 CSS动画 CSS中的动画功能 移动端基础 大纲:视图.rem布局.媒体查询 ...

  7. video标签学习 xgplayer视频播放器分段播放mp4

    文章目录 学习链接 目标 video标签自带视频和制作的视频区别 video标签的src属性 本地视频文件 前端代码 播放效果 服务器视频文件 示例1 后端代码 前端代码 播放效果 示例2 后端代码 ...

  8. 化学专业与计算机的联系PPT,多媒体计算机辅助化学教学课件设计的理论与方法探讨...

    摘要: 多媒体计算机应用于化学教学能提供最理想的教学环境,最广阔的教学思路, 它必然会对教育,教学过程产生深刻的影响.如何运用学习理论,现代教学理论, 课件设计方法等指导课件开发是当前化学教育理论和实 ...

  9. android jdk和ndk下载地址,cocos2d-x Android（SDK，NDK，JDK，ANT）下载地址

    一篇学习HTTP状态码的神文:我与依依的橙色岁月 好的,事情是这样的,数年前,我曾有过一段美好的夏日恋情,在此与大家分享. 依依 这个女孩叫做依依 ,她是 80 后的,生日是 1989 年 3 月吧, ...

最新文章

  1. makefile 同时生成多个可执行文件
  2. java开发人工智能客服_Java开发人工智能客服机器人
  3. mysql5.7修改连接数_Mysql 5.7 centos 7.2 修改最大连接数 无效 2018-03-08
  4. 根据数据库连接的java.sql.Connection获取数据库名称
  5. 设计模式--责任链(Responsibility_Chain)模式
  6. 嵌入式开发C语言中的uint8_t
  7. 没有光驱怎样从硬盘上安装Windows XP系统
  8. 【廖雪峰官方网站/Java教程】设计模式（一）
  9. java中的执行顺序_Java中的执行顺序
  10. hdu5510 Bazinga（KMP 剪枝） ！！
  11. SEO网站优化是什么
  12. 攻防世界web新手题解题writeup
  13. U盘名从E:/变成F:/,怎么修改回来
  14. c语言排序常用问题,【更新中】【排序详解】解决排序问题（以C语言为例）
  15. 惊闻|万盈：玩一元斗地主　引争执出人命　派出所介入调查
  16. 网络开发框架 ——Kestrel
  17. 教你如何搭建自己的图床
  18. 简单谱子C语言程序,c语言曲谱_单片机c语言音乐简谱代码
  19. 基于Python+Django的项目申报审核平台系统
  20. Vue的三种路由模式

热门文章

  1. 新版ipados可以编辑C语言吗,iPadOS新增了五个有用的功能，看你需不需要
  2. 多个cuda 被单进程沾满_报名 | 提高GPU利用率，听英伟达专家分享这个CUDA工具
  3. springboot 静态资源访问，和文件上传 ，以及路径问题
  4. 50: Luogu P4568 分层图
  5. [usaco2004][bzoj3379] 交作业
  6. 正三角形的外接圆面积
  7. ORM进阶之Hibernate 的三大对象
  8. ansible copy file
  9. XML-RPC协议学习
  10. Work Queue based multi-threading