jQuery – videojs 影片播放器

elvisyip2021-04-072023-05-11

相關網址:

https://videojs.com/

Import JS 及 CSS

<link href="videojs/video-js.min.css" rel="stylesheet">
<script src="videojs/video.min.js"></script>

HTML 部份

<body>
  <video id="test" class="video-js vjs-big-play-centered vjs-fluid">
     <p class="vjs-no-js">
         no support
     </p>
  </video>

</body>

jQuery 部份

<script>
    $(function() {
        var p = $("#test");

        var player = videojs(document.getElementById('test'), {
            controls: true,
            poster: "",
            preload: "auto",
            autoplay: false,
            fluid: true,
            muted: false,
            controlBar: {
                children: [{
                        name: "playToggle"
                    }, {
                        name: "currentTimeDisplay"
                    }, {
                        name: "progressControl"
                    }, {
                        name: "durationDisplay"
                    }, {
                        name: "playbackRateMenuButton",
                        "playbackRates": [0.5, 1, 1.5, 2, 2.5]
                    }, {
                        name: "volumePanel",
                        inline: false
                    }, {
                        name: "FullscreenToggle"
                    }

                ]
            },
            sources: [{
                src: "test.mp4",
                type: "video/mp4"
            }]
        }, function() {
            console.log("can play now!", this);
        });
    });
</script>

返回頂部