Пользователь нажимает на изображение, видео начинает играть - PullRequest
Новая
       8

Пользователь нажимает на изображение, видео начинает играть

0 голосов
/ 12 мая 2010

У меня есть изображение, и я хотел бы сделать ссылку на изображение для встроенного видео YouTube, чтобы, если пользователь нажимает на изображение, оно начинало воспроизводиться там, где раньше было изображение. 

<div id="myvideo">
    <a href="http://www.youtube.com/watch?v=Msef24JErmU&playnext_from=TL&videos=dgzKE_Lyv7o">
    <img src="starryeyedsurprise.jpg"></a>
</div>

Что-то вроде того, что делает приведенный выше код, кроме не только гиперссылки на него. Так что я знаю, что javaScript должен заменить то, что находится в #myvideo на: 

<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

А затем автоматически начать играть. Я думаю, мне не нужно, чтобы это было видео на YouTube как таковое, я мог бы просто разместить видео на своем собственном сайте (оно настолько мало, что мне не нужно беспокоиться о том, чтобы показывать видео время от времени) .

Ответы [ 2 ]

2 голосов
/ 12 мая 2010

Просто используйте: 

$("#myvideo").html('<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/Msef24JErmU&hl=en_US&fs=1&rel=0&color1=0x2b405b&color2=0x6b8ab6" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>');

... как обработчик onclick. Например: 

<a href='javascript:void(0);' onclick='DoVideoSwap();'> ... </a>

Это заменит содержимое изображения на видео.

0 голосов
/ 30 ноября 2017

Вы можете использовать это 

<script type="text/javascript">

    var em = '<video width="640" height="360" controls="controls" autoplay="autoplay"><source src="../video/video.mp4" type="video/mp4"><object  data="" width="640" height="360"><embed width="640" height="360" src="http://something.com/video/video.mp4"> </object> </video>';

    function playVid() {
        document.getElementById('videocontainer').innerHTML = em
    }
</script>
<div>
    <span id="videocontainer" onclick="playVid();">
        <sc:FieldRenderer ID="FieldRenderer2" runat="server" key="Title" FieldName="Image" />
    </span>
</div>
...