[英]How do I load a video into a HTML5 page with javascript using onclick
I want to call a function onclick (which I know works) then load it into the page: 我想调用一个函数onclick(我知道有效)然后将其加载到页面中:
I'm trying to create a video element in HTML5 including some attributes for it. 我正在尝试在HTML5中创建一个包含一些属性的视频元素。
I know it works because I tested it with the following alert: 我知道它有效,因为我使用以下警告测试它:
alert("createSmallVideo has been called");
I've commented the alert now and I know the function is being called but why isn't the video being displayed on the web page: 我现在评论了警报,我知道正在调用该函数,但为什么网页上没有显示视频:
function createSmallVideo(){
//alert("createSmallVideo has been called");
var video = document.createElement("video");
video.setAttribute("id", "VideoElement");
video.setAttribute("src", "videos/small.ogv");
video.setAttribute("controls", "controls");
video.setAttribute("preload", "auto");
document.getElementById("#VideoContainer").appendChild(video);
}
What am I doing wrong? 我究竟做错了什么? Please help!
请帮忙!
Because there is no element on your page with an id of #VideoContainer
(or if there is there shouldn't be). 因为您的页面上没有ID为
#VideoContainer
(或者如果不存在的话)。 An element Id cannot contain a #
. 元素Id不能包含
#
。 If you open your JavaScript console you'll probably find a null reference error message. 如果您打开JavaScript控制台,您可能会发现一条空引用错误消息。 Try removing the
#
from your call to document.getElementById()
. 尝试从您对
document.getElementById()
调用中删除#
。
you can preload it with javascript too 你也可以用javascript预加载它
function loadVideo(videoUrl){
var video;
try {
video = new Video();
} catch(e) {
video = document.createElement('video');
}
video.src = videoUrl;
bindOnce(video, 'canplaythrough', function() {alert("Loaded");});
video.onerror = function(e){alert("Error");};
video.load();
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.