Menggunakan jQuery untuk membenamkan filem menggunakan flowplayer

Panduan ini menunjukkan kepada anda bagaimana untuk membenamkan filem menggunakan flowplayer sumber terbuka. Persediaan minimum ini akan bermula; Catatan masa depan akan meliputi penyesuaian lanjutan seperti sokongan iPad, kawalan tersuai, dan streaming langsung.

html

<div id="fms"></div>
<div id="video-stream-status"><span class="status">Status Ready.</span></div>

jQuery

//video or stream address
var streamAddressFull = "http://streamaddress/mp4:filename/playlist.m3u8",
    vidElem = $('#fms'),
    statusElem = $('#video-stream-status .status');

$f('fms', "http://releases.flowplayer.org/swf/flowplayer-3.2.7.swf", {
    debug: true, //output all events to the console for debugging

    onError: function(e) {
        statusElem.html("Error: (code:" + e + ").");
    },

    version: [9, 115], //minimum Flash version required

    onFail: function() {
        statusElem.html("Update Flash for MP4 playback. Your version: " + this.getVersion());
    },

    onBeforeLoad: function() {
        statusElem.html("Loading...");
    },

    clip: {
        url: streamAddressFull,
        scaling: 'fit', //fit, scale, orig, half
        autoPlay: true,
        autoBuffering: true,
        onStart: function(clip) {
            statusElem.html("Playing.");
        }
    },

    plugins: {
        controls: {
            right: 0,
            bottom: 0,
            opacity: 0.95,
            backgroundGradient: 'low',
        }
    },

    canvas: {
        backgroundGradient: 'none',
        backgroundColor: '#000000'
    }
});

Soalan Lazim (Soalan Lazim):

• Pemasangan: Muat turun skrip FlowPlayer dan fail CSS dari laman web rasmi dan masukkannya dalam HTML anda. Inisialisasi Flowplayer menggunakan fungsi , menentukan id elemen sasaran dan pilihan konfigurasi. $f()

• keserasian jQuery: Ya, flowplayer berfungsi dengan lancar dengan jQuery, yang membolehkan kawalan lanjutan dan interaktiviti.

• Penyesuaian: Sesuaikan penampilan flowplayer menggunakan CSS dan pilihan konfigurasinya untuk mengubah saiz, warna, dan tingkah laku.

• Sumber video: FlowPlayer menyokong pelbagai sumber video, termasuk pelayan, CDN, dan perkhidmatan hosting video anda. Sediakan URL video semasa permulaan.

• Kawalan main balik: Gunakan API JavaScript FlowPlayer untuk mengawal main balik secara pemrograman (bermain, jeda, berhenti, mencari, volume). Pendengar acara memberikan maklum balas mengenai status main balik.

• Keserasian penyemak imbas: FlowPlayer serasi dengan pelayar moden menggunakan video HTML5. Penyemak imbas yang lebih tua mungkin memerlukan plugin flash (seperti yang ditunjukkan dalam contoh kod).

• Sokongan mudah alih: Flowplayer responsif dan berfungsi pada peranti mudah alih dengan kawalan sentuhan.

• Pelbagai Contoh: Anda boleh membenamkan beberapa contoh flowplayer pada satu halaman. Masing -masing memerlukan ID yang unik.

• Live Streaming: FlowPlayer menyokong aliran langsung; Sediakan URL aliran semasa permulaan.

• Penyelesaian masalah: Semak konsol JavaScript penyemak imbas untuk mesej ralat. Rujuk dokumentasi Flowplayer dan forum komuniti untuk bantuan.

Atas ialah kandungan terperinci Menggunakan jQuery untuk membenamkan filem menggunakan flowplayer. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!