Question

我正在尝试在我的网站中加载视频播放列表，并按照Google中的说明启用了我的JavaScript。这是我的代码，我不知道问题出在哪里。当我运行localhost页面时，单击链接时视频无法加载。我无法弄清楚问题是什么。

我正在使用Windows 64位操作系统。我想知道这是否是我的JavaScript的问题，但我启用了JavaScript。

<html>
    <head>
        <script>
            $(function() {
                $("#playlist li").on("click", function() {
                    $("#videoarea").attr({
                        "src": $(this).attr("movieurl"),
                        "poster": "",
                        "autoplay": "autoplay"
                    })
                })
                $("#videoarea").attr({
                    "src": $("#playlist li").eq(0).attr("movieurl"),
                    "poster": $("#playlist li").eq(0).attr("moviesposter")
                })
            })
        </script>
        <style>
            #playlist {
                display: table;
            }
            #playlist li {
                cursor: pointer;
                padding: 8px;
            }
            #playlist li:hover {
                color: blue;
            }
            #videoarea {
                float: left;
                width: 640px;
                height: 480px;
                margin: 10px;
                border: 1px solid silver;
            }
        </style>
    </head>
    <body>
        <video id="videoarea" controls="controls" poster="" src=""></video>
        <ul id="playlist">
            <li movieurl="Lemonade.mp4">Lemonade</li>
            <li movieurl="mirror.mp4">Sintel</li>
            <li movieurl="http://html5example.net/static/video/html5_Video_VP8.webm">Resident Evil</li>
            <li movieurl="http://www.ioncannon.net/examples/vp8-webm/big_buck_bunny_480p.webm">Big Buck Bunny</li>
        </ul>
    </body>
</html>

Answer 1

您还没有在您提供的代码中加载jQuery，但是您正在使用$，就好像加载了jQuery一样。

添加链接以加载它，如下所示将带您进入下一步：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

这是一个jsfiddle，显示第四个链接的工作原理：

http://jsfiddle.net/JasonAller/j0cwqtLj/

前两个链接是本地链接，第三个链接被托管它的网站阻止。

为什么我的视频无法从播放列表中播放到我的网站？

1 个答案: