1、首先先排除掉代码问题、路径问题、浏览器不支持问题等常规问题，这些问题另行百度。
width="500px" height="300px" autoplay="autoplay"&
&source src="D:/video/hbg.mp4" type="video/mp4"&
2、首先我自己从网上下载的一个MP4文件，IE10和谷歌都能正常播放。然后自己用格式化工厂转换了一个RMVB文件为MP4，然后就不能播放。
如下图，我选择MP4格式转换，里面的配置文件也调了很多遍，但是就是播放不了，IE10完全没反应，谷歌倒是能出声音，但是影像出不来。
3、我直接在文件右击属性里面看文件属性-详细信息，基本都一样。
4、我用potplayer播放两个不同的文件，用potplayer查看2个文件的属性，发现了不一样的地方，
网上下载的能正常使用video标签播放的视频属性如下图
我们可以看到视频编码是AVC
而我自己用格式化工厂转码的视频编码如下
发现我自己转码的视频编码是mp4v。
5、在格式化工厂里面找到AVC编码的格式，如下图
6、选用AVC格式的编码，重新转码后，使用video标签播放就可以正常播放了。
PS:浏览器对HTML5支持测试页面
阅读(...) 评论()MP4视频在网页中无法播放的情况解决方式_WEB主题公园
MP4视频在网页中无法播放的情况解决方式
MP4视频在网页上播放我们遇到过很多朋友，在制作网站的时候都会放上一个视频用以介绍公司信息或者产品，如果使用优酷土豆等第三方视频媒体的视频外链服务的话，会有较长的广告，这样对于我们的视频播放造成一定的影响。那么我们一般建议大家直接上传一个mp4 视频到媒体库，或者上传到七牛云进行播放，这样就避免了广告的问题。这里有一个教程是将视频托管于七牛云进行播放的：大家可以观看，将视频托管于七牛云适用于只有一两个视频，也就是视频较少的情况下，七牛的免费流量完全可以能够满足播放（如果你是专门的视频网站，在免费的每月20G超过之后，那么可以进行购买七牛的流量了。）七牛上存储视频一个是不会将自己服务器的带宽影响，另一个速度更快，除了七牛云还有阿里云的oss视频托管付费服务等可以使用，当然这些服务是应用在视频较多的网站上。&视频编码格式不正确导致MP4视频在网页上无法播放MP4视频在网页html中只支持H.264的编码格式，如果你生成的视频编码格式不正确，那么就无法进行播放，每一个浏览器对于视频的无法播放的提示略有不同。有的浏览器只出现一个进度条，而视频无法播放。有的浏览器直接提示，无法支持当前视频的格式。因此，在上传视频之前，你需要查看下你的视频是否符合要求的编码，如果你不知道如何查看，可以直接在本地电脑上将视频拖拽进入你的浏览器（360极速模式、火狐、谷歌等等都支持拖入直接播放）如果视频能再浏览器中直接播放，那么视频就可以被网页支持，反之则是不能的，你需要使用格式工厂等软件，将不能播放的视频转码到H.264的编码格式，生成新的视频。&MP4视频放入网页的方法WEB主题公园的wordpress主题一般提供视频代码框给你，以便于让各种类型的视频可以输出。放入MP4视频需要我们使用video标签，也就是如下代码：&&video src=“你的视频地址 controls=“controls” width=“宽度” height=“高度”&&/video&&而video标签有一些参数需要你来了解：&autoplay :出现该属性意味着视频在就绪后将自动播放，用法：autoplay=”autoplay”controls :出现该属性意味着向用户显示控件，如播放按钮等，用法：controls=”controls”height:设置高度
width:设置宽度loop:自动重播，用法：loop=”loop”preload:视频在页面加载时进行加载并预备播放，用法：preload=”auto” – 当页面加载后载入整个视频；preload=”meta” – 当页面加载后只载入元数据；preload=”none” – 当页面加载后不载入视频。注意：若使用了autoplay，则忽略preloadsrc:要播放视频的url&一般来说，主题会强制视频大小，以便适应所有尺寸的设备浏览，但是如果没有强制的话，你可以将宽度设为100%,高度设为300~500均可。&& 关于WEB主题公园
如未标明出处，所有文章均为WEB主题公园原创，如需转载，请附上原文地址，感谢您的支持和关注。本文地址:WordPress原创主题，高端网站模板建站，网站模板建站资源以及开发知识分享，尽在WEB主题公园 WEB主题公园致力于开发适合中国人习惯的中文WordPress网站模板，并提供全程视频教程，让您能够轻松的使用网站模板建立好自己的网站！
相关文章 文章评论
请登录之后发布评论
THEMEPARK团队荣誉出品
长沙森拍客网络科技有限公司 |
咨询热线：93联系邮箱：.cn请注意：在线客服以及咨询热线请在
工作日的9：30~18：00来电咨询
电子邮件在任何时间都会回复解决html5中video标签无法播放mp4问题
这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法，需要的朋友们下面来一起看看吧。
最近发现了一个问题，在手机录制了一个1.mp4文件，主流浏览器都能正常播放。但使用格式工厂将rmvb文件转码为2.mp4却不能播放。通过查找相关的资料终于解决了，下面来看看详细的介绍：
手机录制的视频属性：
格式化工厂转码的视频属性：
首先排除代码问题，路径问题，浏览器不支持等问题。转码后的视频编码是mp4v，这是不能播放的原因，转换为AVC（H264）编码即可。
查阅文档，关于video标签所支持的视频格式和编码：
MPEG4 = 带有H.264视频编码和AAC音频编码的MPEG4文件
WebM = 带有VP8视频编码和Vorbis音频编码的 WebM文件
Ogg = 带有Theora视频编码和Vorbis音频编码的Ogg文件
通过上面的信息我们发现只有h264编码的MP4视频（MPEG-LA公司）、VP8编码的webm格式的视频（Google公司）和Theora编码的ogg格式的视频（iTouch开发）可以支持html5的&video&标签。
video标签允许多个source元素，source元素可以链接不同的视频文件，浏览器将使用第一个可识别的格式，这样可用来解决浏览器兼容问题。
责任编辑：
声明：该文观点仅代表作者本人，搜狐号系信息发布平台，搜狐仅提供信息存储空间服务。
耕耘10载，做移动电商我们更专业！互联网解决方案提供商！
互联网解决方案提供商！你值得拥有！
今日搜狐热点在html5调用时隐藏视频地址-ckplayer帮助手册
帮助手册&|&&|&&|& &|&
软件介绍
免费使用
环境要求及播放器功能介绍
安装和调用播放器
配置一个精简的播放器/按自己的需求进行文件的选择
功能配置&使用技巧
配置文件说明，建议先了解一下。方便您了解其它内容
修改固定功能配置，打开ckplayer.js和ckplayer.xml
加载播放器时初始化设置，如定义视频地址，默认是否播放等内容
风格配置
风格介绍，按钮位置控制，及风格处理的一些方法
语言配置
语言包的介绍和修改方法
javascript-api
使用javascript-api需要注意的参数和事项
javascript-api
actionscript3.0-api
actionscript3.0-api介绍
插件的分类，安装，制作
actionscript-api
视频处理&服务器配置
IIS设置支持flv,f4v,mp4,ogv,webm，以及mp4视频随意拖动和预览
windows环境中apache和nginx中配置支持视频任意拖动
服务器自动化智能转码软件
常见问题
视频播放问题
修改右键
兑换/购买修改右键版权名称的服务
修改/增加右键菜单的方法
加密风格文件style.swf
在html5调用时隐藏视频地址
先看下面的这段代码：&div&id=&a1&&&/div&
&script&type=&text/javascript&&src=&ckplayer/ckplayer.js&&charset=&utf-8&&&/script&
&script&type=&text/javascript&&
&&&&var&flashvars={
&&&&&&&&p:1,
&&&&&&&&e:1
&&&&var&video=['geth5.php?id=123-&ajax/get/utf-8'];
&&&&var&support=['all'];
&&&&CKobject.embedHTML5('a1','ckplayer_a1',600,400,video,flashvars,support);
&/script&上面的代码是通过js的ajax读取视频地址进行播放，并且可以采用post发送方式获取地址（演示里是使用的get）。geth5.php里的输出内容如下：http://movie.ks.js.cn/flv/other/1_0.mp4-&video/mp4,http://www.ckplayer.com/webm/0.webm-&video/webm,http://www.ckplayer.com/webm/0.ogv-&video/ogg如果你只有一个视频地址，则如下：http://movie.ks.js.cn/flv/other/1_0.mp4-&video/mp4这样就可以实现隐藏视频地址了，请注意，js的ajax不支持跨域，如果你是跨域调用，可以在播放器同域里单独用一个服务器端程序跨域调用。
Powered by ckplayer.com&&
Copyright&ckplayer，访问：423649次
积分：306分
排名：第32名
随笔：30篇
评论：68条
阅读排行榜
评论排行榜
hqyj2017:免费的jq知识学习！http://www.hqyj.com/zhuanti/christmas.ht...
bjiang:我最常用的方法是,让form submit到页面中的一个隐藏的iframe中,然后通过页面间通讯的方...
Cidy:能支持html5 embed不？
暖暖:厉害！
aa:&&beforeSend: beforeSendHandler,
vdfbd:还可以
只能帮到你这里了:var filename = $(&#file&).val(); 这个写法本来就...
jquery2000
阅读(64245)
我尝试用jQuery控制HTML5视频，两个视频分别在两个tab中，我希望点中tab后，该tab里的视频可以立即播放，而另外tab里的视频能够停止。我的代码是这样的：
$('#playMovie1').click(function(){
$('#movie1').play();
但发现这样不行，而用以下的js是可以的：
document.getElementById('movie1').play();
解决方法：play并不是jQuery的函数，而是DOM元素的函数，所以我们需要通过DOM来调用play，代码如下：
$('#videoId').get(0).play();
最简单的方法实现Play和Pause:
$('video').trigger('play');
$('video').trigger('pause');
点击视频就能播放和暂停
$("video").trigger("play");//for auto play
$("video").addClass('pause');//for check pause or play add a class
$('video').click(function() {
if ($(this).hasClass('pause')) {
$("video").trigger("play");
$(this).removeClass('pause');
$(this).addClass('play');
$("video").trigger("pause");
$(this).removeClass('play');
$(this).addClass('pause');
静音和取消静音
$('body').find("video").attr('id', 'video')
var myVid = document.getElementById("video");
$('.sound-icon').click(function() {
//here "sound-icon" is a anchor class.
var sta = myVid.
if (sta == true) {
myVid.muted =
myVid.muted =
HTML 5中播放视频的方法：
&video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp4" controls autobuffer&
&p& Try this page in Safari 4! Or you can
&a href="http://www.youtube.com/demo/google_main.mp4"&download the video&/a& instead.&/p&
自动播放：
&video src="abc.mov" autoplay&
使用poster在视频无法加载时显示图片：
&video width="640" height="360" src="http://www.youtube.com/demo/google_main.mp" autobuffer controls poster="whale.png"&
&p&Try this page in Safari 4! Or you can &a href="http://www.youtube.com/demo/google_main.mp4"&download the video&/a& instead.&/p&
一个比较简洁的例子：
&script type="text/javascript"&
function vidplay() {
var video = document.getElementById("Video1");
var button = document.getElementById("play");
if (video.paused) {
video.play();
button.textContent = "||";
video.pause();
button.textContent = "&";
function restart() {
var video = document.getElementById("Video1");
video.currentTime = 0;
function skip(value) {
var video = document.getElementById("Video1");
video.currentTime +=
&video id="Video1" &
// Replace these with your own video files.
&source src="demo.mp4" type="video/mp4" /&
&source src="demo.ogv" type="video/ogg" /&
HTML5 Video is required for this example.
&a href="demo.mp4"&Download the video&/a& file.
&div id="buttonbar"&
&button id="restart" onclick="restart();"&[]&/button&
&button id="rew" onclick="skip(-10)"&&&&/button&
&button id="play" onclick="vidplay()"&&&/button&
&button id="fastFwd" onclick="skip(10)"&&&&/button&
下面是一个比较完整的例子：
&title&Full player example&/title&
&!-- Uncomment the following meta tag if you have issues rendering this page on an intranet or local site. --&
&!-- &meta http-equiv="X-UA-Compatible" content="IE=edge"/& --&
&script type="text/javascript"&
function init() { // Master function, encapsulates all functions
var video = document.getElementById("Video1");
if (video.canPlayType) { // tests that we have HTML5 video support
// if successful, display buttons and set up events
document.getElementById("buttonbar").style.display = "block";
document.getElementById("inputField").style.display = "block";
// helper functions
// play video
function vidplay(evt) {
if (video.src == "") { // inital source load
getVideo();
button = evt. // get the button id to swap the text based on the state
if (video.paused) { // play the file, and display pause symbol
video.play();
button.textContent = "||";
} else { // pause the file, and display play symbol
video.pause();
button.textContent = "&";
// load video file from input field
function getVideo() {
var fileURL = document.getElementById("videoFile"). // get input field
if (fileURL != "") {
video.src = fileURL;
video.load(); // if HTML source element is used
document.getElementById("play").click(); // start play
errMessage("Enter a valid video URL"); // fail silently
// button helper functions
// skip forward, backward, or restart
function setTime(tValue) {
// if no video is loaded, this throws an exception
if (tValue == 0) {
video.currentTime = tV
video.currentTime += tV
} catch (err) {
// errMessage(err) // show exception
errMessage("Video content might not be loaded");
// display an error message
function errMessage(msg) {
// displays an error message for 5 seconds then clears it
document.getElementById("errorMsg").textContent =
setTimeout("document.getElementById('errorMsg').textContent=''", 5000);
// change volume based on incoming value
function setVol(value) {
var vol = video.
// test for range 0 - 1 to avoid exceptions
if (vol &= 0 && vol &= 1) {
// if valid value, use it
video.volume =
// otherwise substitute a 0 or 1
video.volume = (vol & 0) ? 0 : 1;
// button events
document.getElementById("play").addEventListener("click", vidplay, false);
// Restart
document.getElementById("restart").addEventListener("click", function () {
setTime(0);
}, false);
// Skip backward 10 seconds
document.getElementById("rew").addEventListener("click", function () {
setTime(-10);
}, false);
// Skip forward 10 seconds
document.getElementById("fwd").addEventListener("click", function () {
setTime(10);
}, false);
// set src == latest video file URL
document.getElementById("loadVideo").addEventListener("click", getVideo, false);
// fail with message
video.addEventListener("error", function (err) {
errMessage(err);
// volume buttons
document.getElementById("volDn").addEventListener("click", function () {
setVol(-.1); // down by 10%
}, false);
document.getElementById("volUp").addEventListener("click", function () {
setVol(.1); // up by 10%
}, false);
// playback speed buttons
document.getElementById("slower").addEventListener("click", function () {
video.playbackRate -= .25;
}, false);
document.getElementById("faster").addEventListener("click", function () {
video.playbackRate += .25;
}, false);
document.getElementById("normal").addEventListener("click", function () {
video.playbackRate = 1;
}, false);
document.getElementById("mute").addEventListener("click", function (evt) {
if (video.muted) {
video.muted =
evt.target.innerHTML = "&img alt='volume on button' src='vol2.png' /&"
video.muted =
evt.target.innerHTML = "&img alt='volume off button' src='mute2.png' /&"
}, false);
} // end of runtime
}// end of master
&body onload="init();" &
&video id="Video1" controls style="border: 1" height="240" width="320" title="video element"&
HTML5 Video is required for this example
&div id="buttonbar" style="display:")&
&button id="restart" title="Restart button"&[]&/button&
&button id="slower" title="Slower playback button"&-&/button&
&button id="rew" title="Rewind button" &&&&/button&
&button id="play" title="Play button"&&&/button&
&button id="fwd" title="Forward button" &&&&/button&
&button id="faster" title="Faster playback button"&+&/button&
&button id="Button2" title="Mute button" &&img alt="Volume on button" src="vol2.png" /&&/button&
&label&Playback &/label&
&label&Reset playback rate: &/label&&button id="normal" title="Reset playback rate button"&=&/button&
&label& Volume &/label&
&button id="volDn" title="Volume down button"&-&/button&
&button id="volUp" title="Volume up button"&+&/button&
&button id="mute" title="Mute button" &&img alt="Volume on button" src="vol2.png" /&&/button&
&div id= "inputField" style="display:" &
&label&Type or paste a video URL: &br/&
&input type="text" id="videoFile" style="width: 300" title="video file input field" value="http://ie.microsoft.com/testdrive/ieblog/2011/nov/pp4_blog_demo.mp4" /&
&button id="loadVideo" title="Load video button" &Load&/button&
&div title="Error message area" id="errorMsg" style="color:R"&&/div&
感谢。用上了。
摩的大飙客
视频播放方面讲得挺完整，辛苦了
感谢，真的很不错！！！！！！
能支持html5 embed不？
免费的jq知识学习！http://www.hqyj.com/zhuanti/christmas.html?wwxsr
您还没有登录,请或}