通过单击 HTML/JS 文档中的图像加载视频
Posted
技术标签:
【中文标题】通过单击 HTML/JS 文档中的图像加载视频【英文标题】：Loading video by clicking on the image in HTML/JS document 【发布时间】：2013-03-25 10:51:58 【问题描述】：我有一个简单的 html/JS 文档，单击图像后我在其中尝试播放视频：
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
var embedCode = '<object data="http://www.youtube.com/watch?v=Ac_qGnPX8eI" type="application/x-shockwave-flash" ><param name="src" value="http://www.youtube.com/watch?v=Ac_qGnPX8eI"><param name="allowfullscreen" value="true"></object>'
</script>
</head>
<body>
<div id="videocontainer">
<img src="C:\thesis\100GreatP\eclipse_ws\test\src\org\cnstar\wiki\data\calm_waters.jpg" onclick="document.getElementById('videocontainer').innerHTML = embedCode;" />
</div>
</body>
</html>
但是，点击图片后，没有任何反应。这个问题已经在问题replace image with a video embeded 中进行了解释，其中解决方案以我在 HTML 文档中的方式呈现。但这对我不起作用。安装在计算机上的 Shockwave/Flash 播放器。没有成功加载任何浏览器（IE、Firefox、Chrome）。感谢您的帮助。
【问题讨论】：
问题在于您的 YouTube 嵌入代码。通过转到the video 并单击视频下方的共享->嵌入来获取正确的嵌入代码。 是的，这是问题之一。我已经更改了链接，但是仍然无法正常工作。我只是点击图片，图片会消失，出现白框，没有视频。 对我来说似乎是working fine。也许您的浏览器存在限制，不允许在本地 HTML 文件上播放视频？ 【参考方案1】：YouTube JavaScript API，如果遵循正确，为您提供一种在点击时加载视频的方法。只需阅读 API 即可。使用点击链接阅读 API 页面底部的演示。
https://developers.google.com/youtube/js_api_reference
【讨论】：
【参考方案2】：取得该网站的权利https://developers.google.com/youtube/player_parameters
<script type="text/javascript">
var embedCode = '<object > <param name="movie" value="http://www.youtube.com/watch?v=Ac_qGnPX8eI"></param> <param name="allowScriptAccess" value="always"></param><embed src="https://www.youtube.com/v/u1zgFlCw8Aw? version=3&autoplay=1" type="application/x-shockwave-flash" allowscriptaccess="always"
></embed></object>'
<script>
function playVid()
document.getElementById('videocontainer').innerHTML = embedCode
<div id="videocontainer">
<img src="../../../../thesis/100GreatP/eclipse_ws/test/src/org/cnstar/wiki/data/calm_waters.jpg" onclick="playVid();" >
</div>
【讨论】：
以上是关于通过单击 HTML/JS 文档中的图像加载视频的主要内容，如果未能解决你的问题，请参考以下文章
我无法在 Laravel PHP 和 HTML 中显示视频、音频和图像