Question

所以我正在完成我的学校作业，以创建一个HTML页面，从阵列中提供的链接播放视频。我试图通过JavaScript中的一系列链接向我的HTML页面添加视频。但是我的视频只显示了一个图像，到目前为止，我的视频并没有像我创建的代码那样播放。我不确定我犯的错误。有人可以帮帮我吗？

// Data for the "HTML Video" Page

var video = {
    controls: true, 
    width: 320,
    height: 240,
    source: [
        {src: "https://github.com/allanrandall/BTI225W17/raw/master/movie.mp4", type: "video/mp4"},
        {src: "https://github.com/allanrandall/BTI225W17/raw/master/movie.ogg", type: "video/ogg"},
        {src: "https://github.com/allanrandall/BTI225W17/raw/master/movie.webm", type: "video/webm"}
    ]
};


window.onload = function () {

    var VideoPlayer = document.querySelector('#video');
    var string = "";
    string += "<figure>";
    string += "<video width=" + video.width + "height=" + video.height + "controls>";
    for (var i = 0; i < video.source.length; i++)
    {
        string += "<source src=" + video.source[i].src + " type=" + video.source[i].type + " />";
    }
    string += "</video>";
    string += "</figure>";
    VideoPlayer.innerHTML += string;

};

<html>

<head>
    <title>BTI225</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/lab3-theme.css" />
    <script src="js/video.js"></script>
</head>

<body>

    <header>
        <div class="center">
            <h2>
                BTI225 - Assignment 3
            </h2>
        </div>
    </header>
    <nav>
        <div class="center">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="list.html">List</a></li>
                <li><a href="table.html">Table</a></li>
                <li><a href="image.html">Image</a></li>
                <li><a href="audio.html">Audio</a></li>
                <li><a href="video.html">Video</a></li>
                <li><a href="seneca.html">Seneca</a></li>
            </ul>
        </div>
    </nav>

    <section class="main center">

        <!-- Start your code here -->
        <h2>HTML5 Video</h2>
        <div id ="video"></div>
        <!-- End your code here  -->

    </section>
    <footer>
        <div class="center">
        </div>
    </footer>
</body>

</html>

Answer 1

您没有为<video>的属性添加双引号。

您可以使用单引号来包装您的字符串，如下所示。

或者您可以使用反斜杠来转义双引号，例如"\""。

// Data for the "HTML Video" Page

var video = {
    controls: true, 
    width: 320,
    height: 240,
    source: [
        {src: "https://github.com/allanrandall/BTI225W17/raw/master/movie.mp4", type: "video/mp4"},
        {src: "https://github.com/allanrandall/BTI225W17/raw/master/movie.ogg", type: "video/ogg"},
        {src: "https://github.com/allanrandall/BTI225W17/raw/master/movie.webm", type: "video/webm"}
    ]
};


window.onload = function () {

    var VideoPlayer = document.querySelector('#video');
    var string = "";
    string += "<figure>";
    //use single quote to wrap the string
    //the output for your origial method
    console.log("<video width=" + video.width + "height=" + video.height + "controls>")
    //Working by using single quote
    console.log('<video width="' + video.width + '" height="' + video.height + '" controls>')
    //Working by using reverse slash.
    console.log("<video width=\"" + video.width + "\" height=\"" + video.height + "\" controls>")
    string += '<video width="' + video.width + '" height="' + video.height + '" controls>';
    for (var i = 0; i < video.source.length; i++)
    {
        string += '<source src="' + video.source[i].src + '" type="' + video.source[i].type + '" />';
    }
    string += "</video>";
    string += "</figure>";
    VideoPlayer.innerHTML += string;

};

<html>

<head>
    <title>BTI225</title>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="css/normalize.css" />
    <link rel="stylesheet" href="css/lab3-theme.css" />
    <script src="js/video.js"></script>
</head>

<body>

    <header>
        <div class="center">
            <h2>
                BTI225 - Assignment 3
            </h2>
        </div>
    </header>
    <nav>
        <div class="center">
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="list.html">List</a></li>
                <li><a href="table.html">Table</a></li>
                <li><a href="image.html">Image</a></li>
                <li><a href="audio.html">Audio</a></li>
                <li><a href="video.html">Video</a></li>
                <li><a href="seneca.html">Seneca</a></li>
            </ul>
        </div>
    </nav>

    <section class="main center">

        <!-- Start your code here -->
        <h2>HTML5 Video</h2>
        <div id ="video"></div>
        <!-- End your code here  -->

    </section>
    <footer>
        <div class="center">
        </div>
    </footer>
</body>

</html>

Answer 2

ResultSet rs = null; try { rs = ...; // obtain rs // do whatever } finally { if (null != rs) {rs.close();} }之前的空间和以下行中height之前的空间：

controls

缺失。

string += "<video width=" + video.width + " height=" + video.height + " controls>";

// Data for the "HTML Video" Page

var video = {
  controls: true,
  width: 320,
  height: 240,
  source: [{
      src: "https://github.com/allanrandall/BTI225W17/raw/master/movie.mp4",
      type: "video/mp4"
    },
    {
      src: "https://github.com/allanrandall/BTI225W17/raw/master/movie.ogg",
      type: "video/ogg"
    },
    {
      src: "https://github.com/allanrandall/BTI225W17/raw/master/movie.webm",
      type: "video/webm"
    }
  ]
};


window.onload = function() {

  var VideoPlayer = document.querySelector('#video');
  var string = "";
  string += "<figure>";
  string += "<video width=" + video.width + " height=" + video.height + " controls>";
  for (var i = 0; i < video.source.length; i++) {
    string += "<source src=" + video.source[i].src + " type=" + video.source[i].type + " />";
  }
  string += "</video>";
  string += "</figure>";
  VideoPlayer.innerHTML += string;

};

将JavaScript中的视频添加到我的html页面

2 个答案: