h5音频和视频

2018-07-09  本文已影响0人  喜欢吃法棍泡芙

标签

<video>

视频容器

媒体元素

音频和视频

编解码器（浏览器中内嵌了一个叫做编解码器的东西）

source的作用与用法：
<video controls>
  <source src="aaa.ogv"></source>
  <source src="aaa.mp4"></source>
</video>

上述代码中，先加载aaa.ogv格式的文件，如果浏览器不支持ogv格式，就加载后面的aaa.mp4，以此类推，所以source的作用不言而喻了吧。

currentTime

播放过程中可以实时获取当前播放了多长时间

<audio :src="w" id="a1" controls autoplay></audio>
var oA = document.getElementById("a1")
setInterval(function () {
  console.log(oA.currentTime)
}, 1000)

可以看到，浏览器也并不是隔整一秒执行的......
currentTime不仅可以读取，还可以设置（可读写）
eg：设置媒体元素从60秒处开始播放： 
oA.currentTime = 60
duration
var oA = document.getElementById("a1")
console.log(oA.duration)

直接这么获取到audio元素然后打印其duration，结果很可能是NaN，可以理解为没来得及获取媒体元素加载的时长，如果这里给设置一个延迟再打印，是可以获取到duration的。
当歌曲准备到可以被播放时，才进行获取duration和buffered等相关数据获取操作。

媒体元素_2

load()

比如在js中改变了媒体元素的src，这时是需要重新加载媒体元素：

<video controls>
  <source src="aaa.ogv"></source>
</video>
......
as[0].src = "aaa.mp4"
oV.load()

媒体元素_3

事件：loadstart progress suspend emptied stalled play pause loadedmetadata loadeddata waiting playing canplay canplaythrough seeking seeked timeupdate ended ratechange durationchange volumechange

媒体相关事件

<video controls id="ov">
  <source :src="w"></source>
</video>
var oV = document.getElementById("ov")
oV.addEventListener("ended", function () {
  console.log("播放结束")
}, false)

文件播放结束时，控制台打印“播放结束”。

video额外特性

//某vue文件------------------------------------------------------
<video controls id="ov">
  <source :src="w"></source>
</video>
......
import pic from "@/assets/logo.png" 
data(){
  return {
    pic
  }
}
......
mounted(){
  var oV = document.getElementById("ov")
  oV.poster = pic
}

这里我是在vue+webpack项目中进行的实践，在webpack中一切都是模块，所以在要正确加载出图片文件，html中是将图片解码成了base64，因此这里使用模块的思想把图片引入然后赋值给video的poster。
在常规html中引入方式一般为：oV.poster="../assets/logo.png"

<video controls id="ov" poster="../assets/logo.png">
  <source :src="w"></source>
</video>
var oV = document.getElementById("ov")
oV.width = 800
oV.height = 700

练习1：带声音的导航（部分代码）

<ul id="ul1">
  <li au="a">1</li>
  <li au="b">2</li>
  <li au="c">3</li>
  <li au="d">4</li>
  <li au="e">5</li>
  <li au="f">6</li>
  <li au="g">7</li>
</ul>
<audio src="" id="a1"></audio>
var oUl = document.getElementById("ul1")
var aLi = oUl.getElementsByTagName("li")
var oA = document.getElementById("a1")
for(var i=0;i<aLi.length;i++){
  aLi[i].onmouseover = function () {
    console.log(this.getAttribute("au"))
    oA.src = "http://yinjie/yuefu/"+this.getAttribute("au")+".mp3";
    oA.play()
  }
}

练习2：把视频以canvas方式输出（部分代码）

<video controls id="v1">
  <source :src="aaa"></source>
</video>
<canvas id="c1"></canvas>
var oV = document.getElementById("v1")
var oC = document.getElementById("c1")
var oGc = oC.getContext("2d")
//canplay
//在媒体数据已经有足够的数据（至少播放数帧）可供播放时触发
//否则直接是获取不到videoWidth这种数据的
oV.addEventListener("canplay", function () {
  oC.width = oV.videoWidth
  oC.height = oV.videoHeight
  console.log(oV.videoWidth, oV.videoHeight)
}, false)
setInterval(function () {
  oGc.drawImage(oV, 0, 0)
  //另外还可以进行其他像素级操作
}, 30)

练习3：自制播放器（部分代码）
功能：播放/暂停、播放时间实时显示、全屏、静音（每个功能基本上都是相对独立的，没有做互相影响的处理）

<video controls id="v1">
  <source :src="aaa"></source>
</video>
<input type="button" value="播放"/>
<input type="text" value="00:00:00" readonly/> <!--实时播放时间显示-->
<input type="text" value="00:00:00" readonly/> <!--播放总时长-->
<input type="button" value="静音"/> 
<input type="button" value="全屏"/>

var oV = document.getElementById("v1")
var oInput = document.getElementsByTagName("input")

var timer = null //计时器
var oDuration = null //媒体总时长

oV.addEventListener("canplay", function () {
  oV.width = 250 //视频原始大小太大，设置宽高
  oV.height = 500
  oDuration = oV.duration
  oInput[2].value = changeTime(oDuration) //设置总播放时长
                                          //设置总播放时长要放在canplay里面，放在外面获取到的oDuration可能是空
}, false)

oInput[0].onclick = function () { //第一个按钮控制播放和暂停
  if(oV.paused){
    oV.play()
    this.value = "暂停"
    nowTime()
    timer = setInterval(nowTime, 1000)
  }
  else {
    oV.pause()
    this.value = "播放"
    clearInterval(timer)
  }
}
function changeTime(iNum){ //总播放时长转换为时分秒
  iNum = parseInt(iNum)
  var iH = toZero(Math.floor(iNum/3600)); //时
  var iM = toZero(Math.floor(iNum%3600/60));
  var iS = toZero(Math.floor(iNum%60));
  return iH+":"+iM+":"+iS;
}
function toZero(num) { // 9--09，12--12
  if(num<=9){
    return "0"+num
  }
  return ""+num;
}
function nowTime(){
  oInput[1].value = changeTime(oV.currentTime)
}

oInput[3].onclick = function () {
  if(oV.muted){
    oV.volume = 1
    this.value = "静音"
    oV.muted = false //这句话一定要加
  }
  else {
    oV.volume = 0
    this.value = "取消静音"
    oV.muted = true //这句话一定要加
                    //volume音量并不会影响muted值，所以需要手动设置
  }
}
oInput[4].onclick = function () {
  oV.webkitRequestFullScreen()
}

其中关于h5控制全屏播放，可参考如下博客：
张鑫旭：HTML5全屏API在FireFox/Chrome中的显示差异
武方博：html5实现全屏的api方法

练习4：自制播放器（部分代码）
功能：视频进度拖拽控制（只是做了通过拖拽控制视频进度，其他的相互影响的代码暂时未写）

<video controls id="v1">
  <source :src="aaa"></source>
</video>
<div id="div1">  
  <div id="div2"></div>
</div>

var oV = document.getElementById("v1")
var oDiv1 = document.getElementById("div1")
var oDiv2 = document.getElementById("div2")
var oDuration = null //媒体总时长
var disX = 0 //视频进度
oV.addEventListener("canplay", function () {
  oV.width = 250
  oV.height = 500
  oDuration = oV.duration
}, false)
oDiv1.onmousedown = function (ev) {
  var ev = ev || window.event
  disX = ev.clientX - oDiv1.offsetLeft
  oDiv2.style.width = disX + "px"
  document.onmousemove = function (ev) {
    var ev = ev || window.event
    var L = ev.clientX - oDiv1.offsetLeft
    if(L<0){
      L = 0
    }
    else if(L > oDiv1.offsetWidth){
      L = oDiv1.offsetWidth
    }
    oDiv2.style.width = L + "px"
    var scale = L / oDiv1.offsetWidth
    oV.currentTime = oDuration * scale.toFixed(2)
  }
  document.onmouseup = function () {
    document.onmousemove = null
  }
  return false
}
上一篇下一篇

猜你喜欢

热点阅读