JS读取本地json数据，处理数据，循环播放视频

小木头。

已于 2022-04-13 17:33:09 修改

阅读量2.4k

点赞数 2

文章标签： javascript

于 2022-04-13 16:40:11 首次发布

本文链接：https://blog.csdn.net/weixin_52633842/article/details/124150987

版权

html

         #vid {position: absolute;  z-index: 2;}
  </style>
</head>

<body>
  <video src="" id="vid"  autoplay="autoplay" ></video>
</body>

一获取本地json数据并处理

var video_list=[] a用户传入的id data转换前的对象 video_list转换后的数组

data={
  DID: "did:a",
  level1: "['7.mp4']",
  level2: "['6.mp4', 'c.mp4']",
  level3: "['de.mp4', '17.mp4']"
 }

video_list=[
  {level: 'level1', src: '7.mp4'},
  {level: 'level2', src: '6.mp4'},
  {level: 'level2', src: 'c.mp4'},
  {level: 'level3', src: 'de.mp4'},
  {level: 'level3', src: '17.mp4'}
]

/**处理视频数据函数*/
function processingData(a){
  // 获取json本地数据
  var url = "./data/all_info.json"/*json文件url，本地的就写本地的位置，如果是服务器的就写服务器的路径*/
  var request = new XMLHttpRequest();
  request.open("get", url);/*设置请求方法与路径*/
  request.send(null);/*不发送数据到服务器*/
  request.onload = function () {/*XHR对象获取到返回信息后执行*/
    if (request.status == 200) {/*返回状态为200，即为数据获取成功*/
        var json = JSON.parse(request.responseText);
        var seach="did:hpc:RedCave:"+a
        // 遍历匹配seach相应的数据
        var data= json.filter(item => {
          return item.DID===seach
        })[0];
        // 判断未匹配到id提示
        if(data===undefined)return alert('未找到')
        video_list = [] //赋值前清空数据
        // 遍历data对象 key键 data[key]值
        Object.keys(data).forEach(key => {
          const value = data[key]
          try {
            // 必选项处理可能发生错误的语句  将"[]"转化为[]  如果直接使用eval(value)传入"xxx"会报错 这用try处理
            const arr = eval(value)
            // 是数组
            if (Array.isArray(arr)) return arr.forEach(val => addFun(key, val))
            // 不是数组又不会错误的情况
            // addFun(key, value)
          } catch (e) {
            // 处理上面发生错误的语句 不是数组
            // addFun(key, value)
          }
        })
        // 以{ level: key, src: value }添加到数组
        function addFun(key, value) {
          video_list.push({ level: key, src: value })
        }
        getVideoList()
      }
  }
}

二，循环播放视频函数

/**播放视频函数*/
function getVideoList(){
  if(time)clearInterval(time)//每次调用前先清空定时器
  var vid= document.getElementById('vid')//获取video标签
  // 由于定时器一开始要等设定时间后播放 所以先在定时器外播放一次在开启
  var index=0
  vid.style.display='block'
  vid.muted='0'//静音播放
  vid.src=video_path+ video_list[index].src//修改路径
  vid.style.left=100
  vid.style.top=100
  vid.style.width=200
  vid.style.height=200 
  index+=1  //从第二开开始定时播放 否则第一个会播放两边
  // 设置定时器循环播放数据里得视频
  time=setInterval(function(){
    if(index==video_list.length)index=0 //循环播放
    vid.src= video_path + video_list[index].src
    vid.style.left=100
    vid.style.top=100
    vid.style.width=200
    vid.style.height=200
    index++
  }, 9000)
}