HTML 单击按钮时如何打开视频
[英]HTML how to open a video when i click a button
问题描述
So I want to make it so when I click the button I have set, the background will change to this mp4 file that will automatically play (with audio), but I'm pretty new to HTML so I cant get the button to actually do anything.
所以我想这样做，所以当我点击我设置的按钮时，背景会变成这个 mp4 文件，它会自动播放（带音频），但我对 HTML 还是很陌生，所以我无法让按钮实际执行任何事物。 This is the code I have so far, it's in the body section.这是我到目前为止的代码，它在正文部分。 I've tried using onclick with.innerHTML (like in the example below), I've tried different variations of that but I can't get it to work, I can't think of an alternative so I'm asking ya'll beautiful people我尝试使用 onclick 和.innerHTML（如下例所示），我尝试了不同的变体，但我无法让它工作，我想不出替代方案，所以我问你都是漂亮的人
<p> Hey, ya like this clock?</p>
<p> Click this button >:)</p>
<input type="button" value="( ͡° ͜ʖ ͡°)" onclick="clicc()">
<script>
function clicc(){
document.body.innerHTML = "<div class="section">"
<video>
<source src="ZA WARUDO.mp4" type="video/mp4">
</video>
</div>
}
2 个解决方案
解决方案1
1 2020-06-01 20:16:52
the problem is with the quotes and double quotes, here is the fixed js code bit:问题出在引号和双引号上，这里是固定的 js 代码位：
<p> Hey, ya like this clock?</p>
<p> Click this button >:)</p>
<input type="button" value="( ͡° ͜ʖ ͡°)" onclick="clicc()">
<script>
function clicc(){
document.body.innerHTML = "<div class='section'><video source src='ZA WARUDO.mp4' type='video/mp4'></video></div>";
}
</script>
If you want to use double quotes for everything you'll have to escape the ones that are not to define the html string, the ones you'll use to define the html elements attributes, like this:如果要对所有内容使用双引号，则必须转义那些不用于定义 html 字符串的引号，将用于定义 html 元素属性的引号，如下所示：
document.body.innerHTML = "<div class=\"section\"><video source src=\"ZA WARUDO.mp4\" type=\"video/mp4\"></video></div>";
解决方案2
0 已采纳 2020-06-01 20:16:36
There's an issue with your use of quotations.你的引用有问题。 you can't create a string with "" and then have HTML attributes with "" as well.你不能用“”创建一个字符串，然后用“”来创建 HTML 属性。
<html>
<head>
<script>
function clicc(){
document.body.innerHTML = "<div class='section'><video controls><source src='https://file-examples.com/wp-content/uploads/2017/04/file_example_MP4_480_1_5MG.mp4' type='video/mp4'></video></div>"
}
</script>
</head>
<body>
<p> Hey, ya like this clock?</p>
<p> Click this button >:)</p>
<input type="button" value="( ͡° ͜ʖ ͡°)" onClick="clicc()">
</body>
</html>
Check this demo: https://jsfiddle.net/7pruecmh/5/查看此演示： https://jsfiddle.net/7pruecmh/5/
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.