为网站添加视频展示

客户找到我，要把图片这里换成他们公司的宣传视频，好啊，那很简单的

这是客户的网站

选择视频播放插件

一眼就看中了这款插件：video.js，貌似超星学习通就是用的这个，感觉还不错。

videojs/video.js: Video.js - open source HTML5 & Flash video player (github.com)

<video id="my-video" style="max-height: 100%; max-width: 100%;" preload="auto"
       class="video-js vjs-big-play-centered" controls poster="/skin/images/poster.png"
       data-setup="{}">
    <source src="{$field.litpic}" type="video/mp4" />
    <p class="vjs-no-js">
        To view this video please enable JavaScript, and consider upgrading to a
        web browser that
        <a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5
            video</a>
    </p>
</video>

$(document).ready(function () {
    videojs('my-video', {
        controlBar: {
            'currentTimeDisplay': true,
            'timeDivider': true,
            'durationDisplay': true,
            'remainingTimeDisplay': false,
        },
        controls: true,
        'autoplay': true,
        'muted': true,
        fluid: true,
    }, function () {
        console.log('播放器初始化完成');
    });
});

效果展示

参考：videojs播放器插件使用详解 - 云+社区 - 腾讯云 (tencent.com)