Adding a video from JavaScript to my html page
Question
So I am working on my School assignment to create an HTML page to play a video from links provided in an array. I am trying to add a video to my HTML page from an array of links in JavaScript. But my video is just showing an image and isn't playing like a video so far with the code I created. I am not sure about the mistake I am making. Can someone please help me out?
// 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>
2 answers
solution1
0 2018-03-30 23:16:27
You didn't add double quote for the attributes of <video> .
You can use single quote to wrap your string like below.
Or you can use reverse slash to escape the double quote like "\\"" .
// 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>
solution2
0 2018-03-30 23:25:51
A space before height and a space before controls in the following line:
string += "<video width=" + video.width + " height=" + video.height + " controls>";
is missing.
// 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; };
<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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Dynamically adding a video to an html page with JavaScript
adding a forms to a html page with javascript
Adding a javaScript array to a HTML page?
Adding content to a HTML page with Javascript
Adding code from a multidimensional javascript array to html page
Adding sources to HTML5 video in javascript?
Adding a Form into My HTML Keeps Function in Javascript File from Working
Adding video playlist to current video player using html css and javascript
Html page onload, show video on a javascript blockUI
Javascript conflict on my html page
Related Tags