如何使用videojs附加?

时间:2017-04-08 06:36:55

标签: javascript html5 video.js

我正在使用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

任何解决方案?

0 个答案:

没有答案