Блог

Главная - Вопросы по программированию - отображение изображения в качестве первого кадра с помощью flowplayer и при нажатии на изображение воспроизведение видео

отображение изображения в качестве первого кадра с помощью flowplayer и при нажатии на изображение воспроизведение видео

#javascript #html #flowplayer

#javascript #HTML #flowplayer

Вопрос:

Я использую flowpalyer для воспроизведения видео. Я пытаюсь показать изображение png в качестве начального изображения вместо обычного черного экрана. Но по какой-то причине это не работает, кто-нибудь может мне помочь определить, в чем проблема

 <script type="text/javascript" src="http://brianhaskins.com/protege/flowplayer-3.2.2.min.js"></script>

<div style="width: 290px; padding-bottom: 0px;" id="optin">
<div style="width:264px;height:198px;border:1px solid red;">
<a  href="http://brianhaskins.com/blogvideo/blogoptinfinal/blogoptinfinal.mp4" 
style="display:block;width:290px;height:171px;"     id="player"> </a>
<script language="JavaScript">
flowplayer("player", "http://brianhaskins.com/protege/flowplayer-3.2.2.swf"{

    // here is our playlist with two clips
    playlist: [

        // this first PNG clip works as a splash image
        {
            url: 'http://brianhaskins.com/blogvideo/blogoptinfinal/FirstFrame.png', 
            scaling: 'orig'
        },

        // second clip is a video. when autoPlay is set to false the splash screen will be shown
        {
            url: 'http://brianhaskins.com/blogvideo/blogoptinfinal/blogoptinfinal.mp4', 
            autoPlay: false, 

            // video will be buffered when splash screen is visible
            autoBuffering: true 
        }
    ]
});</script>
</div>

Комментарии:

1. В JWPlayer есть возможность показывать изображение во время загрузки видео. Может быть, у Flowplayer есть что-то подобное? Это имело бы больше смысла, чем превращение изображения в элемент списка воспроизведения. (Хотя, возможно, эта функция не существует. Я не очень хорошо знаю Flowplayer.)

2. flowplayer.org/demos/configuration/playlist-splash.html . Я получил его по указанному выше URL

3. ах, достаточно справедливо. Тогда, я думаю, это официальный путь.

4. Что я вижу, так это то, что у вас отсутствует запятая в строке 8.

5. о боже .. действительно, мне нужно проверить зрение… отсутствует запятая

Ответ №1:

Вот код, который я использовал. Надеюсь, это поможет другим, кто находится в положении, в котором я был

 </script><script type="text/javascript" src="http://brianhaskins.com/protege/flowplayer-3.2.2.min.js"></script>

<div style="width: 271px; padding-bottom: 0px;border:3px solid #ccc;margin:0 auto" id="optin">
<div style="width:264px;height:198px;margin:0 auto">
<a  href="http://brianhaskins.com/blogvideo/blogoptinfinal/blogoptinfinal.mp4"  style="display:block;width:264px;height:198px;z-index:300"  id="player"> </a>
<script language="JavaScript">
     flowplayer("player", "http://brianhaskins.com/protege/flowplayer-3.2.2.swf",{

// here is our playlist with two clips
playlist: [

    // this first PNG clip works as a splash image
    {
        url: 'http://brianhaskins.com/blogvideo/blogoptinfinal/FirstFrame.jpg', 
        scaling: 'orig'
    },

    // second clip is a video. when autoPlay is set to false the splash screen will be shown
    {
        url: 'http://brianhaskins.com/blogvideo/blogoptinfinal/blogoptinfinal.mp4', 
        autoPlay: false, 

        // video will be buffered when splash screen is visible
        autoBuffering: true 
    }
]
});</script>