HTML——页面视频获取与渲染

最新推荐文章于 2024-08-22 03:58:35 发布

Zjaun

最新推荐文章于 2024-08-22 03:58:35 发布

阅读量1.1k

点赞数

分类专栏： HTML 文章标签： html

本文链接：https://blog.csdn.net/Zjaun/article/details/94362196

版权

本文介绍了在HTML页面中实现多个视频的轻量级获取和渲染方法，避免使用大型视频播放器库如video.js和mediaElement.js。通过朋友推荐，选择了一个API全面且操作简便的播放器，并分享了如何利用Ajax与后端交互获取视频数据并在页面上展示的步骤。

摘要由CSDN通过智能技术生成

遇到一个小需求，需要在页面进行简单的多个视频的获取以及渲染，就想看看有没有除了video.js、mediaElement.js 等视频播放器之类的，较为轻量的。恰好朋友推荐一个播放器还不错，api也较为全面，使用也很简单，就决定用它了。这里链接

在页面渲染视频

写一个ul进行存放

<div>
    <ul id="list">
    </ul>
</div>

使用Ajax与后端进行数据获取

<script>
    var xmlhttp;
    var videos=[];
	//对于Ajax在菜鸟教程有很明确的例子
    function request() {
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function () {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { //readyState == 4是表示已经完成请求
                var reponse = JSON.parse(xmlhttp.responseText);