为网站添加视频展示
孙泽辉

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

这是客户的网站

选择视频播放插件

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

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

1
2
3
4
5
6
7
8
9
10
11
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(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)

  • Post title:为网站添加视频展示
  • Post author:孙泽辉
  • Create time:2022-04-16 08:36:51
  • Post link:https://hui.zone/post/abc123.html
  • Copyright Notice:All articles in this blog are licensed under BY-NC-SA unless stating additionally.