-
html播放视频
<embed>标签
<embed src="movie.swf" height="200" width="200"/>- 1
HTML 代码显示嵌入网页的 Flash 视频。
<object data="movie.swf" height="200" width="200"/>- 1
HTML 片段显示嵌入网页的一段 Flash 视频：
问题：
示例：
DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>视频title> head> <body> <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> video> body> html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
标签 描述 定义一个视频 定义多种媒体资源,比如 和 定义在媒体播放器文本轨迹 Internet Explorer 9+, Firefox, Opera, Chrome, 和 Safari 支持
视频格式与浏览器的支持
- MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
- WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
- Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件
当前，
浏览器支持的视频格式 浏览器 MP4 WebM Ogg Internet Explorer YES NO NO Chrome YES YES YES Firefox YES YES YES Safari YES NO NO Opera YES (从 Opera 25 起) YES YES 视频格式 格式 MIME-type MP4 video/mp4 WebM video/webm Ogg video/ogg DOM元素提供的方法、属性和事件
方法 方法 描述 addTextTrack() 向音频/视频添加新的文本轨道。 canPlayType() 检测浏览器是否能播放指定的音频/视频类型。 load() 重新加载音频/视频元素。 play() 开始播放音频/视频。 pause() pause() 属性 属性 描述 audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。 autoplay 设置或返回是否在加载完成后随即播放音频/视频。 buffered 返回表示音频/视频已缓冲部分的 TimeRanges 对象。 controller 返回表示音频/视频当前媒体控制器的 MediaController 对象。 controls 设置或返回音频/视频是否显示控件（比如播放/暂停等）。 crossOrigin 设置或返回音频/视频的 CORS 设置。 currentSrc 返回当前音频/视频的 URL。 currentTime 设置或返回音频/视频中的当前播放位置（以秒计）。 defaultMuted 设置或返回音频/视频默认是否静音。 defaultPlaybackRate 设置或返回音频/视频的默认播放速度。 duration 返回当前音频/视频的长度（以秒计）。 ended 返回表示音频/视频错误状态的 MediaError 对象。 loop 设置或返回音频/视频是否应在结束时重新播放。 mediaGroup 设置或返回音频/视频所属的组合（用于连接多个音频/视频元素）。 muted 设置或返回音频/视频是否静音。 networkState 返回音频/视频的当前网络状态。 paused 设置或返回音频/视频是否暂停。 playbackRate 设置或返回音频/视频播放的速度。 played 返回表示音频/视频已播放部分的 TimeRanges 对象。 preload 设置或返回音频/视频是否应该在页面加载后进行加载。 readyState 返回音频/视频当前的就绪状态。 seekable 返回表示音频/视频可寻址部分的 TimeRanges 对象。 seeking 返回用户是否正在音频/视频中进行查找。 src 设置或返回音频/视频元素的当前来源。 startDate 返回表示当前时间偏移的 Date 对象。 textTracks 返回表示可用文本轨道的 TextTrackList 对象。 videoTracks 返回表示可用视频轨道的 VideoTrackList 对象。 volume 设置或返回音频/视频的音量。 事件 事件 描述 abort 当音频/视频的加载已放弃时触发。 canplay 当浏览器可以开始播放音频/视频时触发。 canplaythrough 当浏览器可在不因缓冲而停顿的情况下进行播放时触发。 durationchange 当音频/视频的时长已更改时触发。 emptied 当目前的播放列表为空时触发。 ended 当目前的播放列表已结束时触发。 error 当在音频/视频加载期间发生错误时触发。 loadeddata 当浏览器已加载音频/视频的当前帧时触发。 loadedmetadata 当浏览器已加载音频/视频的元数据时触发。 loadstart 当浏览器开始查找音频/视频时触发。 pause 当音频/视频已暂停时触发。 play 当音频/视频已开始或不再暂停时触发。 playing 当音频/视频在因缓冲而暂停或停止后已就绪时触发。 progress 当浏览器正在下载音频/视频时触发。 ratechange 当音频/视频的播放速度已更改时触发。 seeked 当用户已移动/跳跃到音频/视频中的新位置时触发。 seeking 当用户开始移动/跳跃到音频/视频中的新位置时触发。 stalled 当浏览器尝试获取媒体数据，但数据不可用时触发。 suspend 当浏览器刻意不获取媒体数据时触发。 timeupdate 当目前的播放位置已更改时触发。 volumechange 当音量已更改时触发。 waiting 当视频由于需要缓冲下一帧而停止时触发。 兼容多版本的浏览器
使用source元素来定义一个以上的媒体元素，一个video元素中可以包含任意数量的source元素，浏览器会加载第一个它支持的source元素引用的文件格式，并忽略其他的来源，无法播放HTML5视频的浏览器则会显示你提供的消息中的备用链接
<video controls="controls"> <source src="my-video.mp4" type="video/mp4" /> <source src="my-video.webm" type="video/webm" /> 为旧浏览器输入备用链接或备用文本信息 video>- 1
- 2
- 3
- 4
- 5
自定义控制栏
video播放相关的API：
video.duration：整个媒体文件的播放时长，单位s
video.paused ：如果媒体文件被暂停，则返回true；如果还没开始播放，默认返回true
video.ended ：如果媒体文件播放完毕，则返回true
video.currentTime：以s为单位返回从开始播放到现在所用的时间。在播放过程中，设置currentTime来进行搜索，并定位到媒体文件的特定位置
video.volume ：在0.0到1.0之间设置音频音量的相对值，或者查询当前音量相对值
video.muted ：检测当前是否为静音，是则为true；为文件设置静音或消除静音
video.play() ：播放视频文件
video.pause() ：暂停处于播放状态的视频文件
video.canPlayType() ：测试video元素是否支持给定MIME类型的文件监听事件：
ontimeupdate ：当video.currentTime发生改变时触发该事件全屏控制API：
video.webkitRequestFullScreen()：全屏显示
document.webkitCancelFullScreen()：退出全屏
document.webkitIsFullScreen：如果当前处于全屏状态，则返回true,否则返回false
document.addEventListener(‘webkitfullscreenchange’, handler)：当在全屏和非全屏状态切换时，触发该事件<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <progress value="50" max="100"></progress> <input type="number"> <video src="./videos.mp4" controls></video> <div class="btns"> <button>播放</button> <button>暂停</button> <button>快进</button> <button>快退</button> <button>快倍速</button> <button>慢倍速</button> </div> <div class="play"> <button id="play">播放</button> <button id="progress">获得播放百分比</button> </div> <div class="showprogress"></div> <script> //1.获取视频 var video=document.getElementsByTagName('video')[0]; //2.获取音频 var btns=document.getElementsByClassName('btns')[0]; console.log(btns); //3.判断按钮的文本内容、绑定事件 btns.onclick=function(){ //4.获取按钮内的事件 因为这里产生了点击 所以有点击事件 var text=event.target.innerText; if(text == '播放'){ // console.log(video.volume); // 视频的音量 // console.log(video.duration); //视频的总长度 // console.log(video.cuttertTime); //视频当前播放的时长 // console.log(video.paused); //视频当前播放状态 true为暂停 video.play() } if(text == '暂停'){ video.pause() } if(text == '快进'){ video.currentTime +=10 video.play() } if(text == '快退'){ video.currentTime -=10 video.play() } if(text == '快倍速'){ console.log(video.playbackRate); video.playbackRate *= 1.8 video.play() } if(text == '慢倍速'){ video.playbackRate *= 0.5 video.play() } } //需求：2. 同一个按钮实现暂停播放 var play_btn = document.getElementById('play') play_btn.onclick = function(){ if(video.paused){ //判断视频播放状态 true为暂停 video.play() play_btn.innerText = '暂停' }else{ video.pause() play_btn.innerText = '播放' } } // 需求：3.获得播放的百分比 var progress = document.getElementById('progress') progress.onclick= function(){ var total = video.duration var current = video.currentTime var res = (current/total*100).toFixed(2) +'%' console.log(res); //将百分比存入div var showprogress = document.getElementsByClassName('showprogress')[0] showprogress.innerText = res } </script> </body> </html>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
-
相关阅读:
【个人笔记js的原型理解】
修改I2C上拉电阻的值
【PyTorch实战演练】自调整学习率实例应用（附代码）
草料二维码生成器怎么连接打通其他应用？
【C++ 程序设计】实战：C++ 实践练习题（21~30）
Netty（6）netty组件：EventLoop、Channel、Future和Promise、Handler和Pipeline
如何使用U盘重装系统？
第二章 软件测试开发工程师
Java Web 7 JavaScript 7.3 JavaScript 基础语法
PhotoShop 将所有图层按照当前画布大小导出
- 原文地址：https://blog.csdn.net/weixin_43956958/article/details/132823821
