网页上播放视频语法测试

主要演示视频

1
2
3
<video src="https://video.twimg.com/amplify_video/1870890254951239680/vid/avc1/1280x720/dag0V45heXyUpN9f.mp4?tag=14" controls width="100%" preload="metadata" poster="https://blog.cmliussss.com/img/jiso.jpg">
  您的浏览器不支持 video 标签。
</video>

演示折叠视频效果：

点击展开视频


演示视频 A

演示视频 B

好的👌，那我帮你改成带 controls + width=100% + autoplay（不静音） 的版本。
在你的 .md 文件里这样写：解释：
controls → 显示播放控件
autoplay → 自动播放（浏览器一般要求 必须加 muted 才能生效）
muted → 静音，才能让 autoplay 在大多数浏览器中生效
loop → 循环播放
playsinline → 在移动端防止强制全屏
这样你在安知鱼主题下写 .md，编译后就能正常嵌入视频。

演示视频 C

点击展开 Bilibili 视频

演示视频 D

1
2
  {% span center code h4 red, 海康威视4G摄像机 手机配置有线网络添加 关闭4G网络 %}
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=1903742863&bvid=BV11m411y7mY&cid=1520088689&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" width="100%" height="500px"> </iframe>

演示视频 E

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
  {% span center code h4 red, 海康威视4G摄像机 手机配置有线网络添加 关闭4G网络 %}
<div class="video-container">
<iframe src="//player.bilibili.com/player.html?isOutside=true&aid=1903742863&bvid=BV11m411y7mY&cid=1520088689&p=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"></iframe>
</div>


<style>
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 * 100%) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>

下面是默认模板

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="video-container">
[up主专用，视频内嵌代码贴在这]
</div>

<style>
.video-container {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 aspect ratio (height/width = 9/16 * 100%) */
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
</style>