Question

我正在尝试使用this fiddle等自定义播放按钮在html页面中播放youtube视频。

HTML 的

<button id="btn">Play</button>

<object type="application/x-shockwave-flash" id="yt" data="http://www.youtube.com/v/6eK-W32IME0?fs=1&amp;enablejsapi=1&amp;hl=en_US" width="330" height="200"><param name="allowScriptAccess" value="always"/></object>

的JavaScript

var yt = document.getElementById("yt");

document.getElementById('btn').onclick = play;

function play() {
    yt.playVideo();            
}

代码在JSFiddle中运行良好，但是当我在文本文件中放入相同内容并执行时，视频无法播放。请在这方面建议我，提前致谢。

Answer 1

在代码中，您尝试通过document.getElementById访问元素，这取决于您编写<script>标记的位置。小提琴的脚本加载过程或位置可能与普通浏览器不同。根据您的代码，如果<script>标记位于<button>之前，那么它将无法正常工作，就好像您将<script>放在<object>之后，那么它将起作用。< / p>

我修改了您的代码，如下所示，我能够成功运行。

<html>
<head>
    <script type="text/javascript">
    function init() {
        var yt = document.getElementById("yt");

        document.getElementById('btn').onclick = play;
    }

    function play() {
        yt.playVideo();            
    }

    </script>
</head>
<body onload="init()">

<button id="btn">Play</button>

<object type="application/x-shockwave-flash" id="yt" 
    data="http://www.youtube.com/v/6eK-W32IME0?fs=1&amp;enablejsapi=1&amp;hl=en_US" 
    width="330" height="200">
    <param name="allowScriptAccess" value="always"/>
</object>

</body>
</html>

由于SOP原因，必须通过http协议加载页面，如果作为文件协议加载，浏览器将不允许访问播放器

通过显式控制播放YouTube视频

1 个答案: