2024-01-20 分類: 網站建設
現在小視頻在我們的生活中使用已經很廣泛了,那么其實現效果都有哪些呢,其實現在用html也是可以實現視頻播放頁面效果的。
今天,成都網站建設工程師給您分享一下關于“html實現視頻播放頁面效果”的具體實施過程是怎么樣的。
相比上個視頻的對比,做出了以下改變:
1.在上一個視頻的基礎上加以改進,通過iframe的方法引入,和name值的傳參,使iframe的鏈接改變。
2.通過data-title的賦值,改變標題的名字
3.在視頻下方加入隨機鏈接,每次刷新的值都會是鏈接改變
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'); //給點擊的元素添加正在播放標識
});
});
/*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;">視頻標題:</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>熱門:<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="/upload/pic22/name.jpg">
<p class="video_show_zj_js">
<b class="video_show_zj_name">標題</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萬</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萬</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萬</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萬</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萬</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萬</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萬</em></span></a>
</li>
</ul>
</figcaption>
</figure>
</dl>
</section>
Demo:https://blog.retechs.cn/demo/video1/
以上就是今天成都網站建設開發人員跟您分享的內容,希望能對大家的網頁設計方面能有所幫助。如果您需要做網站,歡迎您來成都創新互聯咨詢,我們將竭誠問您服務!
當前標題:html實現視頻播放頁面效果2
文章地址:http://m.newbst.com/news1/314601.html
成都網站建設公司_創新互聯,為您提供網站收錄、域名注冊、手機網站建設、網站制作、外貿建站、外貿網站建設
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯
猜你還喜歡下面的內容