2012-02-18 2 views
0

Это совершенно нечетное .......Почему я должен дважды вызвать проигрыватель?

Вот мой код:

HTML

<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a> 

JAVASCRIPT

$(document).ready(function() { 
flowplayer('a.video', { 
     src: '/swf/flowplayer.commercial-3.2.7.swf', 
     clip: { 
      autoPlay: false, 
      autoBuffering: true 
     } 
    }); 
}) 

Над examaple не работает, игрок не создается в DOM. Но ниже пример (все, что я делаю, дважды вызывает потоковый проигрыватель) .....?!

HTML

<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">Test</a> 

JAVASCRIPT

$(document).ready(function() { 
    flowplayer('a.video', { 
     src: '/swf/flowplayer.commercial-3.2.7.swf', 
     clip: { 
      autoPlay: false, 
      autoBuffering: true 
     } 
    }); 

    flowplayer('a.video', { 
     src: '/swf/flowplayer.commercial-3.2.7.swf', 
     clip: { 
      autoPlay: false, 
      autoBuffering: true 
     } 
    }); 
}) 

Почему?

ответ

2

Try и удалить описание теста вашей гиперссылке и она должна работать:

<a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px">**Test**</a> 

Попробуйте переместить сценарий в нижней части страницы. Это один из best practices

Это мой образец, и она работает:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
     <title>Set default value</title> 
     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
     <script type="text/javascript" src="http://static.flowplayer.org/js/flowplayer-3.2.6.min.js"></script> 
    </head> 
    <body> 
     <a class="video" href="http://pseudo01.hddn.com/vod/demo.flowplayervod/flowplayer-700.flv" style="display:block;width:520px;height:330px"></a> 

     <script type="text/javascript"> 
      $(document).ready(function() { 

      flowplayer('a.video', { 
       src: 'http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf', 
       clip: { 
        autoPlay: false, 
        autoBuffering: true 
        } 
       }); 
      }) 
     </script> 
    </body> 
</html> 
+0

благодарит это сработало! странно, что a-tag должен быть полностью пустым, но это кажется существенным. – nerdess

+0

@nerdess: да, это странно. Я не читал документацию, но я предполагаю, что она обязательна. Рад, что это помогло. – LeftyX

1

Я столкнулся с этим вопросом в последнее время, когда у меня был значок воспроизведения внутри тега привязки. В результате я решил освободить привязку тега HTML по щелчку, чтобы исправить эту проблему. Пример кода ниже.

HTML:

<a id="videoPlayer" class="videoPlayer" href="[VIDEO_URL]" style="background-image: url(VIDEO_THUMB_URL);"> 
    <img src="/images/icon_video_play.png" width="40" height="40" alt="View video" /> 
</a> 

CSS:

a.videoPlayer { 
    display: block; 
    width: 480px; 
    height: 270px; 
    text-align: center; 
    cursor: pointer; 
} 

a.videoPlayer img { 
    margin-top: 115px; 
    border: 0px; 
} 

Javascript:

$(document).ready(function() { 
    $("a.videoPlayer").click(function (e) { 
     // Empty anchor tag to avoid having to click twice 
     $(this).empty(); 

     flowplayer("videoPlayer", "/flash/video/flowplayer.swf");    

     e.preventDefault(); 
    }); 

}); 
Смежные вопросы