我正在使用videojs的这个插件here。
选择视频后我无法追加。
以下代码:
$('#chooseFile').click(function(event) {
event.preventDefault();
// prevents our button from submitting or doing anything else
$('#fileInput').trigger('click');
// passes on the click event to our hidden choose file input (or rather,
// it triggers a new click event, whatevs)
});
$("#fileInput").on("change", function() {
var files = this.files;
var anyWindow = window.URL || window.webkitURL;
var objectUrl = anyWindow.createObjectURL(files[0]);
var add = "<video id=\"my-video\" class=\"video-js vjs-default-skin vjs-big-play-centered vjs-16-9\" controls preload=\"auto\" data-setup=\"{}\">\
<source id=\"src_video\" type='video/mp4'>\
<p class=\"vjs-no-js\">\
To view this video please enable JavaScript, and consider upgrading to a web browser that\
<a href=\"http://videojs.com/html5-video-support/\" target=\"_blank\">supports HTML5 video</a>\
</p>\
</video>";
$("#video").append(add);
$("#src_video").attr('src', objectUrl);
window.URL.revokeObjectURL(files[0]);
});
#fileInput {
display:none;
}
#fileName {
display: none;
}
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://vjs.zencdn.net/5.19.1/video-js.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://vjs.zencdn.net/5.19.1/video.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.1/js/bootstrap.min.js"></script>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<a class="brand" href="#">ButtStyle</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="mailto:timt@timtate.org">Contact</a></li>
</ul>
</div><!--/.nav-collapse -->
</div>
</div>
</div>
<div class="container">
<h1>File Selection Button Styling</h1>
<form>
<input type="file" id="fileInput">
<button id="chooseFile" class="btn"><i class="icon-file"></i> Choose File</button>
<button type="submit" class="btn btn-primary"><i class="icon-upload icon-white"></i> Upload It!</button>
</form>
</div> <!-- /container -->
<div id="video"></div>
如果您更喜欢jsfiddle:Here
选择视频后我无法追加。我不想显示浏览器默认值。我想展示videojs here。
任何解决方案?