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

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

相比上個(gè)視頻的對(duì)比，做出了以下改變：

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

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

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

js代碼

$(function() {

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

$('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'); //給點(diǎn)擊的元素添加正在播放標(biāo)識(shí)

});

});

/*title切換*/

function showTitle(title) {

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

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

}

/*向上滾動(dòng)*/

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' frame 'allowfullscreen'></iframe>
<div class="video_bofang_mtbd">
<div id="scroll" class="scroll clearfix">
<ul class="mingdan" id="holder">
<li>熱門(mén)：<script type="text/javascript">document.writeln(str1)</script></li>
<li>熱門(mén)：<script type="text/javascript">document.writeln(str1)</script></li>
<li>熱門(mén)：<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="/upload/pic22/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="/upload/pic22/name.jpg"><span>你的名字<br><em><img src="/upload/pic22/bof.png">1.5萬(wàn)</em></span></a>
</li>
<li class="video_show_list">
<a name="video/name.mp4" data-title="你的名字" onclick="showTitle(this)"><img src="/upload/pic22/name.jpg" ><span>你的名字<br><em><img src="/upload/pic22/bof.png">1.8萬(wàn)</em></span></a>
</li>
<li class="video_show_list">
<a name="video/name.mp4" data-title="你的名字" onclick="showTitle(this)"><img src="/upload/pic22/name.jpg"><span>你的名字<br><em><img src="/upload/pic22/bof.png">2.1萬(wàn)</em></span></a>
</li>
<li class="video_show_list">
<a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="/upload/pic22/txjg.jpg"><span>天行九歌<br><em><img src="/upload/pic22/bof.png">2.0萬(wàn)</em></span></a>
</li>
<li class="video_show_list">
<a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="/upload/pic22/txjg.jpg"><span>天行九歌<br><em><img src="/upload/pic22/bof.png">2.0萬(wàn)</em></span></a>
</li>
<li class="video_show_list">
<a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="/upload/pic22/txjg.jpg"><span>天行九歌<br><em><img src="/upload/pic22/bof.png">2.0萬(wàn)</em></span></a>
</li>
<li class="video_show_list">
<a name="video/txjg.mp4" data-title="天行九歌" onclick="showTitle(this)"><img src="/upload/pic22/txjg.jpg"><span>天行九歌<br><em><img src="/upload/pic22/bof.png">2.0萬(wàn)</em></span></a>
</li>
</ul>
</figcaption>
</figure>
</dl>
</section>

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

以上就是今天成都網(wǎng)站建設(shè)開(kāi)發(fā)人員跟您分享的內(nèi)容，希望能對(duì)大家的網(wǎng)頁(yè)設(shè)計(jì)方面能有所幫助。如果您需要做網(wǎng)站，歡迎您來(lái)成都創(chuàng)新互聯(lián)咨詢，我們將竭誠(chéng)問(wèn)您服務(wù)!

當(dāng)前標(biāo)題：html實(shí)現(xiàn)視頻播放頁(yè)面效果2
文章地址：http://jinyejixie.com/news1/314601.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、域名注冊(cè)、手機(jī)網(wǎng)站建設(shè)、網(wǎng)站制作、外貿(mào)建站、外貿(mào)網(wǎng)站建設(shè)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)