我的网站电影在所有浏览器中播放都很好,但IOS(iPhone和iPad)都有奇怪的行为。 (我无法在其他设备/移动系统中进行测试。)视频随海报一起出现。在触摸播放按钮时,虽然需要片刻响应,但它前进到电影的第一帧并且视频停止;然而,音频继续。如果您触摸屏幕并向前擦除视频,它将开始播放应有的状态。如果然后将其擦回到开头,则行为将重复:声音,但在第一帧之前没有视频,直到向前手动擦除它为止。
代码:
<video controls="controls" poster="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.jpg" style="width:100%" title="">
<source src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.m4v" type="video/mp4" />
<source src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.webm" type="video/webm" />
<source src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.ogv" type="video/ogg" />
<source src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.mp4" type="video/h264" />
<object type="application/x-shockwave-flash" data="http://example.com/theater/movies/current/eh5v.files/html5video/flashfox.swf"width="576" height="432" style="position:relative;">
<param name="movie" value="http://example.com/theater/movies/current/eh5v.files/html5video/flashfox.swf" />
<param name="allowFullScreen" value="true" />
<param name="flashVars" value="autoplay=false&controls=true&fullScreenEnabled=true&posterOnEnd=true&loop=false&poster=http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.jpg&src=http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.m4v" />
<embed src="http://example.com/theater/movies/current/eh5v.files/html5video/flashfox.swf" width="576" height="432" style="position:relative;" flashVars="autoplay=false&controls=true&fullScreenEnabled=true&posterOnEnd=true&loop=false&poster=http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.jpg&src=http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.m4v" allowFullScreen="true" wmode="transparent" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer_en" />
<img alt="" src="http://example.com/theater/movies/current/eh5v.files/html5video/BigBuckBunny.jpg" style="position:absolute;left:0;" width="100%" title="Video playback is not supported by your browser" />
</object>
</video>
在关闭body标签之前:
<script src="http://example.com/theater/movies/current/eh5v.files/html5video/html5ext.js" type="text/javascript"></script>
我在发布之前用两个不同的转换器仔细检查了.mp4文件,并将其正确转换为h264。在我的代码中,我确实将.m4v的类型设置为.mp4。如果我更改它,则没有播放按钮,视频根本无法播放。
我将不胜感激。
答案 0 :(得分:0)
我听了一段时间,停止了MAC支持新版本的FLASH。 mimeType:application / x-shockwave-flash 然后我留下一些支持线来验证mimeType,mimetype的版本以及支持浏览器的所有音频和视频CODEC。
var util = {
regExpEscapeSpecialCharacters: function (a) {
return a.toString().replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
},
trim: function (a) {
return a.toString().replace(/^\s+/, '').replace(/\s+$/, '');
},
replaceAll: function (source, search, replace, ignoreCase) {
var search1 = this.regExpEscapeSpecialCharacters(search);
var ignore = (ignoreCase) ? "gi" : "g";
var result = source.replace(new RegExp(search1, ignore), replace);
return result;
},
isEqualString: function (str1, str2, ignoreCase) {
str1 = str1.toString();
str2 = str2.toString();
var search = this.regExpEscapeSpecialCharacters(str1);
var ignore = (ignoreCase) ? "gi" : "g";
var reg = new RegExp("^" + search + "$", ignore);
return reg.test(str2);
},
contain: function (source, search, ignoreCase) {
search = this.regExpEscapeSpecialCharacters(search);
var ignore = (ignoreCase) ? "gi" : "g";
var reg = new RegExp(search, ignore);
return reg.test(source);
},
isUndefinedOrNull: function (a) {
return (typeof (a) === "undefined") || (a === null);
},
getMimeTypeVersion: function (name) {
var obj = this.getMimeType(name);
if (!this.isUndefinedOrNull(obj)) {
if (!this.isUndefinedOrNull(obj["version"])) {
return obj["version"];
} else {
if (!this.isUndefinedOrNull(obj["description"])) {
var d = obj["description"];
return this.trim(this.replaceAll(d, name, "", true));
} else {
return null;
}
}
} else {
return null;
}
},
getMimeType: function (type) {
var obj = null;
for (var o in navigator.mimeTypes) {
if (navigator.mimeTypes[o]["enabledPlugin"]) {
var mime = navigator.mimeTypes[o];
if (!this.isUndefinedOrNull(mime) && (!this.isUndefinedOrNull(mime["type"]))) {
if (this.isEqualString(mime["type"], type, true)) {
obj = mime["enabledPlugin"];
break;
}
}
}
}
return obj;
},
getMimeTypeBySuffix: function (suffix) {
var obj = null;
for (var o in navigator.mimeTypes) {
if (navigator.mimeTypes[o]["enabledPlugin"]) {
var mime = navigator.mimeTypes[o];
if (!this.isUndefinedOrNull(mime["suffixes"])) {
if (this.isEqualString(mime["suffixes"], suffix, true)) {
obj = mime["enabledPlugin"];
break;
}
}
}
}
return obj;
},
getMimeTypeByName: function (name) {
var obj = null;
for (var o in navigator.mimeTypes) {
if (navigator.mimeTypes[o]["enabledPlugin"]) {
var mime = navigator.mimeTypes[o]["enabledPlugin"]; //["enabledPlugin"]
if (!this.isUndefinedOrNull(mime["name"])) {
if (this.isEqualString(mime["name"], name, true)) {
obj = mime;
break;
}
}
}
}
return obj;
},
getAllVideoCodecs: function () {
var obj = new Array();
var vid = document.createElement('video');
for (var o in navigator.mimeTypes) {
if (navigator.mimeTypes[o]["enabledPlugin"]) {
var mime = navigator.mimeTypes[o];
if (!this.isUndefinedOrNull(mime) && (!this.isUndefinedOrNull(mime["type"]))) {
if (this.contain(mime["type"], "video/", true)) {
var type = mime["type"];
if (!this.isUndefinedOrNull(vid) && ("canPlayType" in vid) && (vid.canPlayType(type) !== "")) {
obj.push(type);
}
}
}
}
}
return obj;
},
getAllAudioCodecs: function () {
var obj = new Array();
var vid = document.createElement('video');
for (var o in navigator.mimeTypes) {
if (navigator.mimeTypes[o]["enabledPlugin"]) {
var mime = navigator.mimeTypes[o];
if (!this.isUndefinedOrNull(mime) && (!this.isUndefinedOrNull(mime["type"]))) {
if (this.contain(mime["type"], "audio/", true)) {
var type = mime["type"];
if (!this.isUndefinedOrNull(vid) && ("canPlayType" in vid) && (vid.canPlayType(type) !== "")) {
obj.push(type);
}
}
}
}
}
return obj;
}
};
try {
//Check mimetype and CODES.
var mime = "application/x-shockwave-flash";
var objMimeType = util.getMimeType(mime);
if (objMimeType !== null) {
//Supported....
document.write("MIMETYPE SUPPORTED<br />");
var version = util.getMimeTypeVersion(mime);
if (version !== null) {
//COMPARE HERE YOUR VERSION.
document.write("VERSION MIMETYPE: " + version + "<br />");
document.write("######## VIDEO CODEC SUPPORTED #######" + "<br />");
//ARRAY OF ALL VIDEOCODEC SUPPORTED IN BROWSER.
var arrayVideoCodec = util.getAllVideoCodecs();
if (arrayVideoCodec.length > 0) {
for (var i = 0; i < arrayVideoCodec.length; i++) {
var videoCodec = arrayVideoCodec[i];
//######3Print here the result.
document.write(videoCodec + "<br />");
}
}
//ARRAY OF ALL AUDIOOCODEC SUPPORTED IN BROWSER.
document.write("<br /><br />######## AUDIO CODEC SUPPORTED #######" + "<br />");
var arrayAudioCodec = util.getAllAudioCodecs();
if (arrayAudioCodec.length > 0) {
for (var i = 0; i < arrayAudioCodec.length; i++) {
var audioCodec = arrayAudioCodec[i];
//######3Print here the result.
document.write(audioCodec + "<br />");
}
}
}
} else {
//NO MIME TYPE.
document.write("NO MIMETYPE SUPPORTED");
}
} catch (e) {
alert(e);
}