現(xiàn)在小視頻在我們的生活中使用已經(jīng)很廣泛了，那么其實現(xiàn)效果都有哪些呢，其實現(xiàn)在用html也是可以實現(xiàn)視頻播放頁面效果的。

　　今天，石家莊網(wǎng)站建設(shè)工程師給您分享一下關(guān)于“html實現(xiàn)視頻播放頁面效果”的具體實施過程是怎么樣的。

　　相比上個視頻的對比，做出了以下改變：

　　1.在上一個視頻的基礎(chǔ)上加以改進(jìn)，通過iframe的方法引入，和name值的傳參，使iframe的鏈接改變。

　　2.通過data-title的賦值，改變標(biāo)題的名字

　　3.在視頻下方加入隨機(jī)鏈接，每次刷新的值都會是鏈接改變

　　js代碼

　　$(function() {

　　var iframe = $("div.video_bofang iframe"); //播放頁面

　　$('ul.video_show_con li a').click(function() {

　　iframe.attr("src", $(this).attr("name")); //更改iframe src

　　$('ul.video_show_con li a').removeClass('on');

　　$(this).addClass('on'); //給點擊的元素添加正在播放標(biāo)識

　　});

　　});

　　/*title切換*/

　　function showTitle(title) {

　　var TitleType = title.getAttribute("data-title");

　　document.getElementById("video_con_title").innerHTML = TitleType;

　　}

　　/*向上滾動*/

　　function AutoScroll(obj) {

　　$(obj).find("ul:first").animate({

　　marginTop: "-40px"

　　},

　　800,

　　function() {

　　$(this).css({

　　marginTop: "0px"

　　}).find("li:first").appendTo(this);

　　});

　　}

　　$(document).ready(function() {

　　setInterval('AutoScroll("#scroll")', 2500)

　　});
html代碼
<section class="public_width">
    <dl class="video_con">
                <figure class="video_con_show tab">
                    <div class="video_bofang tab-box">
                        <dt class="video_con_title" ><b style="font-size: 30px;">視頻標(biāo)題：</b><span id="video_con_title">你的名字</span></dt>

                       <iframe id="iframe_video" height=512 width=900 src='video/name.mp4' frameborder=0 'allowfullscreen'></iframe>
                        <div class="video_bofang_mtbd">
                           <div id="scroll" class="scroll clearfix">
                              <ul class="mingdan" id="holder">
                                <li>熱門：<script type="text/javascript">document.writeln(str1)</script></li>
                                <li>熱門：<script type="text/javascript">document.writeln(str1)</script></li>
                                <li>熱門：<script type="text/javascript">document.writeln(str1)</script></li>
                              </ul>
                            </div>
                    </div>
                </div> 
                    <figcaption class="video_show_zs">
                        <div class="video_show_zj">
                            <img class="video_show_zj_img" src="images/name.jpg">
                            <p class="video_show_zj_js">
                                <b class="video_show_zj_name">標(biāo)題</b>
                                <span class="video_show_zj_zc">描述</span>
                            </p>
                        </div>
                        <span class="video_show_title">播放列表</span>
                        <ul class="video_show_con tab-menu">
                             <li class="video_show_list">
                                <a name="video/name.mp4" data-title="你的名字" onclick="showTitle(this)"><img src="images/name.jpg"><span>你的名字<br><em><img src="images/bof.png">1.5萬</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/name.mp4" data-title="你的名字" onclick="showTitle(this)"><img src="images/name.jpg" ><span>你的名字<br><em><img src="images/bof.png">1.8萬</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/name.mp4" data-title="你的名字" onclick="showTitle(this)"><img src="images/name.jpg"><span>你的名字<br><em><img src="images/bof.png">2.1萬</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="images/txjg.jpg"><span>天行九歌<br><em><img src="images/bof.png">2.0萬</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="images/txjg.jpg"><span>天行九歌<br><em><img src="images/bof.png">2.0萬</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="images/txjg.jpg"><span>天行九歌<br><em><img src="images/bof.png">2.0萬</em></span></a>
                            </li>
                            <li class="video_show_list">
                                <a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="images/txjg.jpg"><span>天行九歌<br><em><img src="images/bof.png">2.0萬</em></span></a>
                            </li>
                        </ul>
                    </figcaption>
                </figure>
            </dl>
    </section>

　　Demo:https://blog.retechs.cn/demo/video1/

　　以上就是今天石家莊網(wǎng)站建設(shè)開發(fā)人員跟您分享的內(nèi)容，希望能對大家的網(wǎng)頁設(shè)計方面能有所幫助。如果您需要做網(wǎng)站，歡迎您來石家莊尚武科技咨詢，我們將竭誠問您服務(wù)!