如何用Javascript更改视频标签上的src？

时间：2014-08-17 20:03:36

标签： javascript html5 canvas

我希望能够点击下面列出的链接，该链接将为我的视频播放器加载一个变量，即我要在我的网站上播放的电影。我无法播放或加载甚至显示标签的提醒信息。

新方法：

    function setMovie(dir,movie){
    alert('Entered function setMovie');
        var m = document.getElementById("movie");
        var s = m.getElementsByTagName('source')[0];
        var temp = dir + '\';
            temp = temp + movie;
            s.setAttribute('source',temp);
        alert(temp);
    }

    function setM(){
    alert("Test");
    }

视频标记：

  <video id="mm" width="520" height="340" controls>
        <source src="movie.mp4" type="video/mp4">
  </video>

代码：

  <a onclick="setMovieName('M','00203.144p.mp4');">From Russia With Love (1963)</a>

M是电影所在的目录。

 function setMovie(dir,movie){
    alert('Entered function setMovie');
        var m = document.getElementById("movie");
        var s = m.getElementsByTagName('source')[0];
        var temp = dir + '\';
            temp = temp + movie;
            s.setAttribute('source',temp);
        alert(temp);
    }

    function setM(){
    alert("Test");
    }

www.jamesbond.sw是我自己使用的测试网站。

enter image description here

如果您注意到变量名称被截断并且缺少零和我的变量的其他部分。我想知道为什么会这样。

所有源代码：

这是新的源代码仍然无法正常工作。 www.jamesbond.sw是我的主页。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>Moviereviews</title>
    <link   rel="shortcut icon" type="image/x-icon" href="css/images/favicon.ico"/>
    <link   rel="stylesheet"    type="text/css" href="css/style.css"    media="all"/>
    <link   rel="stylesheet"    type="text/css" href="css/colorbox.css" media="all"/>
    <script src="js/functions.js" type="text/javascript"></script>
    <script type="text/javascript">
        function setMovie(dir,movie){
        alert('Entered function setMovie');
            var m = document.getElementById("movie");
            var s = m.getElementsByTagName('source')[0];
            var temp = dir + '\';
                temp = temp + movie;
                s.setAttribute('src',temp);
        }

        function setM(){
        alert("Test");
        }
    </script>
</head>
<body>
<br>
 <div id="wrapper">
        <div class="light-bg">
            <div class="shell">
                <div class="header">
                    <div class="socials">
                        <a href="http://www.facebook.com" class="facebook-ico">facebook-ico</a>
                        <a href="http://www.twitter.com"  class="twitter-ico">twitter-ico</a>
                        <a href="http://www.youtube.com"  class="you-tube-ico">you-tube-ico</a>
                    </div>
                    <h1 id="logo"><a href="www.jamesbond.ws">Moviereviews</a></h1>
                    <nav id="navigation">
                        <ul>
                            <li><a href="www.jamesbond.ws">The James Bond Movie Site</a></li> <!--can be repeated to make new cells -->
                        </ul>
                    </nav>
                    <div class="cl">&nbsp;</div>
                </div>
            <div class="main">
                    <section class="content">
                        <div class="post">
                            <div class="post-inner">
                                <div class="img-holder">
                                    <center>
                                        <video id="movie" width="520" height="340" controls>
                                               <source src="M\00203.144p.mp4" type="video/mp4">
                                        </video>
                                    </center>
                                </div>
                            </div>
                        </div>
                    </section>
               <div class="post">
                    <aside class="sidebar">
                        <div class="widget">
                            <h3 class="widgettitle">James Bond Movies</h3>
                            <ul>
                                <li><a onclick="setM();">Test</a></li>
                                <li><a onclick="setMovie('M','00098.144p.mp4');">Dr. No. (1962)</a></li>
                                <li><a onclick="setMovie('M','00098.144p.mp4');">From Russia With Love (1963)</a></li>
                                <li><a onclick="setMovie('M','00202.144p.mp4');">Goldfinger (1964)</a></li>
                                <li><a onclick="setMovie('M','00203.144p.mp4');">Thuderball (1965)</a></li>
                                <li><a onclick="setMovie('M','00204.144p.mp4');">You Only Live Twice (1967)</a></li>
                                <li><a onclick="setMovie('M','00205.144p.mp4');">On Her Majesty's Secret Service (1969)</a></li>
                                <li><a onclick="setMovie('M','00206.144p.mp4');">Diamonds Are Forever (1971)</a></li>
                                <li><a onclick="setMovie('M','00207.144p.mp4');">Live and Let Die (1973)</a></li>
                                <li><a onclick="setMovie('M','00208.144p.mp4');">The Man with the Golden Gun (1974)</a></li>
                                <li><a onclick="setMovie('M','00209.144p.mp4');">The Spy Who Loved Me (1977)</a></li>
                                <li><a onclick="setMovie('M','00210.144p.mp4');">Moonraker (1979)</a></li>
                                <li><a onclick="setMovie('M','00211.144p.mp4');">For Your Eyes Only (1981)</a></li>
                                <li><a onclick="setMovie('M','00212.144p.mp4');">Octopussy (1983)</a></li>
                                <li><a onclick="setMovie('M','00213.144p.mp4');">A View To A Kill (1985)</a></li>
                                <li><a onclick="setMovie('M','00214.144p.mp4');">The Living Daylights (1987)</a></li>
                                <li><a onclick="setMovie('M','00215.144p.mp4');"></a></li>
                                <li><a onclick="setMovie('M','00216.144p.mp4');">Licence to Kill (1989)</a></li>
                                <li><a onclick="setMovie('M','00217.144p.mp4');">Goldeney (1995)</a></li>
                                <li><a onclick="setMovie('M','00218.144p.mp4');">Tomorrow Never Dies (1997)</a></li>
                                <li><a onclick="setMovie('M','00219.144p.mp4');">The World is Not Enough (1999)</a></li>
                                <li><a onclick="setMovie('M','00220.144p.mp4');">Die Another Day (2002)</a></li>
                                <li><a onclick="setMovie('M','00221.144p.mp4');">Casino Royal (2006)</a></li>
                                <li><a onclick="setMovie('M','00222.144p.mp4');">Quantum of Solace (2008)</a></li>
                                <li><a onclick="setMovie('M','00223.144p.mp4');">Skyfall (2012)</a></li>
                            </ul>
                        </div>
                    </aside>
                </div>
            </div>
        </div>  
    </div>
 </div> 

<iframe width="620" height="438" src="http://www.playmycode.com/play/embed/jayenkai/space-clusters" 
       marginheight="0" marginwidth="0" scrolling="no" frameborder="0" style="border: none; border-size: 0; overflow: hidden; overflow-x: hidden; overflow-y: hidden;">
</iframe>

</body>
</html>

我开始怀疑onclick是否有效。测试功能没有显示警告框，因此我不完全确定为什么会出现这种情况。

<li><a onclick="setM();">Test</a></li>

1 个答案:

答案 0 :(得分：0)

function setMovieName(name){
    var vid = document.getElementById('mm');
    var src = vid.getElementsByTagName('source')[0];
    src.setAttribute('src',name);
}

getElementsByTagName（＆＃39; source＆＃39;）[0]将获得您正在寻找的第一个元素。

setAttribute（＆＃39; src＆＃39;，name）;将改变src =＆＃34;＆＃34;你传递给函数的第一个。

相关问题
最新问题