常用代码口令

弘慧

五、常用代码口令

代

码

类

别

图片代码

音频代码

视频代码

音视频播放器制作

其他常用

加底色部分，为使用时根据实际情况编辑替换部分

图片代码

原大小

<section class="_editor">

    <p>

        <img src="图片网址"/>

    </p>

</section>

可调节大小

调节%前方的数字，达到效果

<section class="_editor">

    <p>

        <img src="图片网址" style="width:34%;"/>

    </p>

</section>

单个音频代码

1.示例

[点击三角播放]

<p style="text-align: center;">

    <span style="font-size: 14px;"><span style="color: rgb(155, 25, 14);">点击三角播放</span></span>

</p>

<p>

    <span style="padding:30px 1% 30px 1%;text-align:center"><audio src="https://app.xf8.site/resources/media/audio/yunshuichanxin-excerpt.mp3" controls="controls" style="width:360px;max-width:100%"></audio></span>

</p>

2.点击播放

<div style="padding:30px 1% 30px 1%;text-align:center"><audio src="音频网址" loop="loop" controls="controls" style="width:360px;max-width:100%"></audio></div>

3.自动播放

适用背景音乐

<div style="padding:30px 1% 30px 1%;text-align:center"><audio src="音频网址" autoplay="autoplay" controls="controls" style="width:360px;max-width:100%"></audio></div>

4.自动循环播放

<div style="padding:30px 1% 30px 1%;text-align:center"><audio src="音频网址" loop="loop" autoplay="autoplay" controls="controls" style="width:360px;max-width:100%"></audio></div>

单个视频代码

1.示例

[点击播放]

<section class="_editor">

                    <p style="text-align: center;">

                        <span style="font-size: 14px;">[点击播放]</span>

                    </p>

                </section>

                <section class="_editor">

                    <video src="http://baidu.fjxfofa.top/ziyuan-wxjb/video/wxjb/qitashipin/fahui/shipin/20180617bulisiben/fyfy/A01.mp4" poster="http://baidu.fjxfofa.top/ziyuan-wxjb/video/wxjb/qitashipin/fahui/zhutitu/20180617bulisiben/bulisibben.png" loop="loop" preload="none" controls="controls" webkit-playsinline="" playsinline="" style="background-color:black;width:800px;max-width:100%;"></video>

                </section>

2.点击播放

<div style="padding:20px 2% 20px 2%;text-align:center"><video src="视频网址" poster="封面图网址" loop="loop" preload="none" controls="controls" webkit-playsinline="" playsinline="" style="background-color:black;width:800px;max-width:100%;"></video></div>

3.自动播放

效果可替代gif

<div style="padding:20px 2% 20px 2%;text-align:center"><video src="视频网址" poster="封面图网址" autoplay="autoplay" preload="none" controls="controls" webkit-playsinline="" playsinline="" style="background-color:black;width:800px;max-width:100%;"></video></div>

4.自动循环播放

<div style="padding:20px 2% 20px 2%;text-align:center"><video src="视频网址" poster="封面图网址" loop="loop" autoplay="autoplay" preload="none" controls="controls" webkit-playsinline="" playsinline="" style="background-color:black;width:800px;max-width:100%;"></video></div>

其他代码

1.底色代码

效果

<section class="_editor" data-tpl-id="18733">

    <section style="overflow:hidden;margin-bottom:unset;">

        <section style="background-color:#FFEBCB;margin-bottom:unset;">  

            <p class="aiActive">

                <br/>

            </p>

        </section>

    </section>

</section>

2.