音频/视频那些坑
坑1:关于html5 video currentTime 在chrome浏览器下设定失败问题解决
chrome下src需要在线视频完整引用地址
坑2:window.onload方式获取audio.duration的值为NaN
监听oncanplay
坑3:js动态创建音频数量>6条以后,则无法显示
![这里写图片描述](https://img-blog.csdn.net/20170920170116125?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvbGl0dGxld2luZHk1MjA=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
ex:
<video width="300" height="" id="myVideo" autobuffer="true" controls="controls">
<source src="http://ofuamxwhl.bkt.clouddn.com/2mengmusanqian.mp4" type="video/mp4"></source>
</video>
<p></p>
<button type="button" id="forward"
onclick="forward()">快进15s</button>
<button type="button" id="defaultPlaybackRate"
onclick="defaultPlaybackRate()">速率/2</button>
<script type="text/javascript">
window.onload = function() {
var myVideo = document.getElementById("myVideo");
myVideo.oncanplay = function(){
console.log("总时间" + myVideo.duration);
}
myVideo.ontimeupdate = function() {
console.log("当前时间:" + myVideo.currentTime);
if(myVideo.ended) {
console.log("视频播放结束");
}
}
};
function forward() {
myVideo.currentTime += 15;
}
function defaultPlaybackRate() {
myVideo.defaultPlaybackRate = 0.5;
myVideo.load();
}
</script>
视频/音频格式播放检测
canPlayType 返回probably maybe 空字符串
function checkAudio() {
var myAudio = document.createElement("audio");
if(myAudio.canPlayType) {
if("" != myAudio.canPlayType('audio/mpeg')) {
document.write("您的浏览器支持mp3编码。<br>");
}
if("" != myAudio.canPlayType('audio/ogg; codecs="vorbis"')) {
document.write("您的浏览器支持oog编码。<br>");
}
if("" != myAudio.canPlayType('audio/mp4; codecs="mp4a.40.5"')) {
document.write("您的浏览器支持aac编码。");
}
} else {
console.log("您的浏览器不支持要检测的音频格式");
}
}
function checkVideo() {
var myVideo = document.createElement("video");
if(myVideo.canPlayType) {
if("" != myVideo.canPlayType('video/mp4;codecs="avc1.64001E"')) {
document.write("您的浏览器支持 h264 编码。<br />");
}
if("" != myVideo.canPlayType('video/ogg;codecs="vp8"')) {
document.write("您的浏览器支持 vp8 编码。<br />");
}
if("" != myVideo.canPlayType('video/ogg;codecs="theora"')) {
document.write("您的浏览器支持 theora 编码。<br />");
} else {
console.log("您的浏览器不支持要检测的音频格式");
}
}
}
window.onload = function() {
checkAudio();
checkVideo()
}
Tips
audio.play();
audio.pause();
audio.pause();
audio.currentTime = 0;
audio.currentTime = 0;
audio.play();
移动端video播放器
'<video class="my_video" status="0" style="object-fit: fill";
poster="003.jpg" x5-playsinline webkit-playsinline playsinline
x5-video-player-type= h5 preload="auto">' +
'<source src="' + urll + '/' + itemR.PhoneFileUrl + '" type="video/mp4">' +
'</video>'
----------
给video加上object-fit: fill;的style属性
解决video出现上下两个黑边
----------
mui('.ctn_tv').on('tap', '.my_video', function() {
var my_video_ary = document.getElementsByClassName("my_video");
console.log("this_obj:" + this.paused);
if(this.paused == true) { //当前点击的是 停止播放的 把前面正在播放的停止
for(var i = 0; i < my_video_ary.length; i++) {
if(my_video_ary[i].paused == false) {
my_video_ary[i].pause();
my_video_ary[i].setAttribute('status', '0');
}
}
var status = this.getAttribute('status');
if(status == '0') {
this.setAttribute('status', '1');
this.play();
} else if(status == '1') {
this.setAttribute('status', '0');
this.pause();
}
} else if(this.paused == false) { //当前点击的是 正在播放的
this.pause();
this.setAttribute('status', '0');
}
//print pause.value
this.addEventListener('ended', function() { //视频播放完的事件
console.log("tv is overred");
this.setAttribute('status', '0');
this.pause();
}, false);
});