H5开发:H5视屏播放

HTML5 是下一代的 HTML, 提供了展示视频的标准,规定了一种通过 video 元素来包含视频的标准方法。

Video有以下的属性。

autoplay    autoplay    如果出现该属性,则视频在就绪后马上播放。    

controls     controls    如果出现该属性,则向用户显示控件,比如播放按钮。    

height        pixels    设置视频播放器的高度。    

loop           loop    如果出现该属性,则当媒介文件完成播放后再次开始播放。    

preload      preload    如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src              url    要播放的视频的 URL。    

width           pixels    设置视频播放器的宽度。    

其中,如果想要实现自动播放,可以在Video里面加上autoplay属性就可以了。以下是例子。

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE HTML>
< html >
< body >
 
< video  width = "320"  height = "240"  controls = "controls"  autoplay>
   < source  src = "/i/movie.ogg"  type = "video/ogg" >
   < source  src = "/i/movie.mp4"  type = "video/mp4" >
Your browser does not support the video tag.
</ video >
 
</ body >
</ html >
很抱歉,我不是一个能够展示代码的平台,但是我可以给你一些参考和指导。 首先,你需要一个视频列表,可以通过 PHP 从数据库中获取视频信息并且将其呈现在页面上。 然后,你可以使用 HTML5video 标签来播放视频,并且使用 Jquery 来控制视频的切换。 以下是一个简单的示例: HTML: ``` <div class="video-container"> <video id="video-player" autoplay muted loop> <source src="video1.mp4" type="video/mp4"> </video> </div> <ul class="video-list"> <li data-video="video1.mp4"><img src="thumb1.jpg"></li> <li data-video="video2.mp4"><img src="thumb2.jpg"></li> <li data-video="video3.mp4"><img src="thumb3.jpg"></li> </ul> ``` CSS: ``` .video-container { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; } #video-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } .video-list { display: flex; justify-content: center; align-items: center; } .video-list li { margin: 0 10px; cursor: pointer; } .video-list li img { width: 100px; height: 100px; } ``` Jquery: ``` $(document).ready(function() { $('.video-list li').click(function() { var videoSrc = $(this).data('video'); $('#video-player').attr('src', videoSrc); }); }); ``` 当用户点击视频列表中的缩略图时,Jquery 会获取该视频的 URL 并将其作为 video 标签的 source 属性的值,从而切换视频。视频播放器是在 HTML5video 标签中实现的,CSS 的样式用于显示视频并使其响应式,以适应不同的屏幕大小。 这只是一个简单的示例,你可以根据自己的需求进行修改和扩展。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值