HTML5播放器细谈,从大众自带浏览器 到 wechat和QQ以x5内核的浏览器,以及UC其他特殊的浏览器在此不再细谈:)当然也会分析iphone iOS系统和Android手机系统的差别。
【基本属性】video标签
属性:
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
【HTML样例】
代码:
- 1
- 1
【获取video对象】
- 1
- 1
【Media 方法及属性】
HTMLVideoElement和HTMLAudioElement 均继承自HTMLMediaElement
- 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
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 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
- 92
- 93
- 94
- 95
- 96
- 97
- 98
- 99
- 100
- 101
- 102
- 103
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
function addSourceToVideo(element,src,type)
{
var source = document.createElement(‘source’);
source.src = src;
source.type= type;
element.appendChild(source);
}
function insertVideo(src,type,width,height)
{
var vid = document.createElement(“video”);
vid.controls=”controls”;
vid.width = width;
vid.height=height;
vid.id = “video_control”;
vid.muted= false;
addSourceToVideo(vid,src,type);
document.getElementById(“show”).appendChild(vid);
}
function muteVideo()
{
var vid = document.getElementById(“video_control”);
if(vid == undefined)
return;
if (vid.muted==undefined || !vid.muted)
{
vid.muted = true;
}
else
{
vid.muted = false;
}
}
function playVideo()
{
var video = document.getElementById(“video_control”);
if(video==undefined)
{
insertVideo("files/happyfit2.mp4","video/mp4",604,256);
video = document.getElementById("video_control");
}
video.play();
}
“`
【参考资源】
1.自制video播放器demo: http://zqiong.cn/myplugins/video.html
2.audio/video集合帖子:
http://www.360doc.com/content/15/0317/14/14006402_455807117.shtml
3.相对比较老的 问题集锦: http://blog.csdn.net/cdnight/article/details/40303825
4.自画播放缓冲区:
https://developer.mozilla.org/zh-CN/Apps/Fundamentals/Audio_and_video_delivery/buffering_seeking_time_ranges
5.【好文】
https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/Using_HTML5_audio_and_video
【准备研究的课题】
1.使用 video.js 开发 Html5 视频页面:
http://www.tuicool.com/articles/7jYvQrR
3.移动端测试:html5中video标签的总结:
http://www.w3cfuns.com/notes/13237/958727b4ca894475ab5db599b937ba70.html
4.Html5 Video 实现方案:
http://www.cnblogs.com/lizeyan/p/5549159.html
https://www.html5rocks.com/zh/tutorials/video/basics/