html实现视频播放页面效果2

现在小视频在我们的生活中使用已经很广泛了，那么其实现效果都有哪些呢，其实现在用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
文章地址：/news1/314601.html

成都网站建设公司_创新互联，为您提供网站收录、域名注册、手机网站建设、网站制作、外贸建站、外贸网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联