2021-7-7 工作记录--判断页面跳转 + 切换视频后，让所有的视频都暂停播放 + 判断是PC端还是移动端

一、判断页面跳转

HTML：

JS：

$(".swt_navigation>li").map(function(index,item){
  var url = $(item).find("a").attr('data-href');
  var location = window.location.pathname; // window.location.pathname的简介如下图
  if(url==location){
    $(item).attr('class','active');  // 相当于在其html里面加上class="active"[active的样式由自己定义]
     								// 对于HTML元素本身就带有的固有属性，在处理时，使用prop方法；
                                   // 对于HTML元素我们自己自定义的DOM属性，在处理时，使用attr方法。
  }else{
    $(item).attr('class','');
  }
  if(location == '/') { // 跳转到首页
    $('.swt-grid_sideBar').css({'position':'','height':'auto'});
    $('.swt_slideBar_btn').hide(); // 隐藏返回顶部按钮
  }
})

二、切换视频后，让所有的视频都暂停播放：防止播放一个视频后，切换到下一个视频时，上一个视频还在自动播放。

对应代码：

var myVideo = document.querySelectorAll('.swt_grid_video video');
$(function () {
  $('.text_content ul li').on('click',function () {
    myVideo.forEach(function (item,index) {
      // 暂停视频
      item.pause();
    });
  })
})

结果：
初始页面：

点击播放第一个视频

切换到第二个视频

回到第一个视频，第一个视频自动停止播放

三、判断是PC端还是移动端

第一种：jQuery

// 判断是PC端还是移动端
function isPc(){
  if ($(window).width() >=1024) { // PC端：屏幕尺寸>=1024px
    return true;
  }else{ // 移动端：屏幕尺寸<1024px
    return false;
  }
}

第二种：原生js

// 判断是PC端还是移动端
function isPc(){
  if (window.screen.width >=1024) { // PC端：屏幕尺寸>=1024px
    return true;
  }else{ // 移动端：屏幕尺寸<1024px
    return false;
  }
}