2020.10.09陈悦玲

1.html5新增语法

1.video

  1. 简化版写法:兼容性差
<video src="" controls> </video>
  1. 视频标签标准语法(兼容处理)
 `<video>
    <source src="视频文件URL地址" />
    <source src="视频文件URL地址" />
    <source src="视频文件URL地址" />
     浏览器不支持视频的提示文本
</video>`
//浏览器将使用第一个可识别的视频
  1. 视频标签属性
    1. width 宽度
    2. height 高度

    以下取值为布尔值:

    1. controls 显示播放原生控件(兼容性极差)
    2. loop 循环播放
    3. autoplay 自动播放视屏(大多数浏览器禁用此功能)
    4. muted 静音播放
    5. poster 在视频播放之前显示广告,取值为广告的url(缺点:如果暂停视频不能显示广告图片)
    6. preload 视频的预加载方式默认auto(注意:设置该属性后,则视频在页面加载时进行加载,并预备播放。如果使用 ” autoplay “,则忽略该属性)
  2. 使用DOM操作视频

    HTMLVideoElement属性

//1. 获取视频对象
var vdo = document.getElmentById("video")
//2. 获取/设置对象的宽度/高度(如果本身没有设置 就是0)
vdo.width
vdo.height
//3. 获取视频对象的原始宽度、高度
vdo.videoWidth
vdo.videoHeight
//注意:如果要获取视频对象的原始宽度和高度必须在loadeddata事件完成后才能使用
vdo.addEventListener("loadeddata",()=>{
     console.log(vde.videoWidth)             
     console.log(vde.videoHeight)
})
//loadeddata 事件表示已经加载完成视频的第一帧,当加载完视频的第一帧以后,视频的原始宽度和高度才能正常访问
//4. 获取视频海报帧
vdo.poster = 'myvideo.mp4'
    HTMLMediaElement属性
<script>
//autoplay  是否自动播放
//muted  是否静音
//controls  是否显示播放控件
//loop 是否循环播放
//src  用于设置媒体文件的url地址
//volume  用于获取、设置媒体的音量(取值范围[0,1])
vdo.volume = 0.6
//playbackRate  获取、设置媒体的播放速率,1.0为正常速率
//paused  用于获取媒体对象是否在暂停,返回值为布尔值
//ended  用于获取媒体对象是否播放完毕
//currentTime  用于获取、设置媒体对象的当前播放时间(单位为秒)
//duration  用于获取媒体对象的总时长(单位s)


//方法play()  用于实现媒体的播放
vdo.play()
//方法pause()  用于实现媒体的暂停
veo.pause()

var play = document.getElementById("play")
play.onclick = ()=>{
    //判断视频是否为暂停
    if(vdo.paused==false){
        vdo.pause();
    }else{
        vdo.play();
    }
}


//事件
//媒体对象播放时触发
vdo.addEventListener("play",()=>{})
//媒体对象暂停时触发
vdo.addEventListener("pause",()=>{})
//媒体对象播放完毕后触发
vdo.addEventListener("ended",()=>{})
//媒体文件的第一帧加载完成后被触发
vdo.addEventListener("loadeddata",()=>{})
//媒体对象的currentTime属性发生变化时调用
vdo.addEventListener("timeupdata",()=>{})
//媒体对象加载结束时触发
vdo.addEventListener("canplaythrough",()=>{})

</script>

2.audio

  1. 音频标签标准语法
<audio>
      <source src="音频文件URL"/>
      <source src="音频文件URL"/>
      <source src="音频文件URL"/>
      浏览器不支持音频的提示文本
</audio>
  1. 音频标签属性
<script>
    //controls
    //autoplay
    //muted
    //loop
    //preload
    //和视频是一样的
</script>
  1. HTMLAudioElement
    构造函数:var ado = new Audio([音频文件的URL地址])
    ==> 1. var ado=new Audio(“./myaudio.mp3”);2.ado.controls=true;3.document.body.appendChild(ado)
  2. HTMLMediaElement

3. 全屏模式(兼容性讨厌)

  1. 全屏模式兼容写法
<script>
//进入全屏模式兼容写法
function requestFullScreen(element) {
       if(element.requestFullscreen) {
               element.requestFullscreen();
       } else if(element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
       } else if(element.webkitRequestFullscreen) {
               element.webkitRequestFullscreen();
       } else if(element.msRequestFullscreen) {
               element.msRequestFullscreen();
       }
}
//启动全屏:
//整个页面:
requestFullScreen(document.documentElement);
//某个页面元素
requestFullScreen(document.getElementById("vdo"));



//退出全屏模式兼容性写法
function exitFullScreen() {
      if(document.exitFullscreen) {
           document.exitFullscreen();
      } else if(document.mozCancelFullScreen) {
           document.mozCancelFullScreen();
      } else if(document.webkitExitFullscreen) {
          document.webkitExitFullscreen();
      } else if(document.msExitFullscreen){
          document.msExitFullscreen();
     }
}
//退出
//exitFullscreen();
p1.onclick = ()=>{exitFullscreen()}
</script>
  1. 全屏属性和事件
<script>
    //判断当前浏览器是否允许设置全屏状态
    document.fullScreenEnabled
    //获取全屏显示的网页元素
    document.fullscreenElement
    //启动全屏或退出全屏时触发
    fullscreenchange//有兼容性
    //启动全屏或退出全屏失败时触发
    fullscreenerror//有兼容性
</script>

4.canvas

  1. 通过标签创建画布
<canvas id="canvas" height:"800"; width:"800"></canvas>
  1. 通过js程序获取画布画笔
<script>
    var cvs = document.getElementById("canvas")
    var ctx = cvs.getContext(2D)
</script>
  1. CanvasRenderingContext2D对象
    1. 绘制图形
<script>
    //1. 绘制空心矩形(描边矩形)
    ctx.strokeRect(x,y,width,height)
    //2. 绘制实心矩形(填充矩形)
    ctx.fillRect(x,y,width,height)
    
    //所有画笔样式要在绘制之前写才会生效!!!!!!!!!
    
    //3. 获取/设置描边矩形颜色
    //获取:
    ctx.strokeStyle
    //设置:
    ctx.strokeStyle="#f00"
    //4. 获取/设置填充矩形颜色
    //获取:
    ctx.fillStyle
    //设置:
    ctx.fillStyle="#f00"
    //5. 获取/设置画笔透明度
    //获取:
    ctx.globalAlpha
    //设置:(取值0-1)
    ctx.globalAlpha=0.4
</script>
  1. 绘制文本
<script>
    //1. 绘制描边文本
    ctx.strokeText(text,x,y)
    //2. 绘制填充(实体)文本
    ctx.fillText(text,x,y)
    //3. 获取/设置文本样式
    //设置:
    ctx.font="字号 字体";
    //获取:
    ctx.font
    //4. 获取/设置文本的水平对齐方式
    //设置:
    ctx.textAlign="center";
    //获取:
    ctx.textAlign
    //5. 获取/设置文本的垂直对齐方式(基线位置)
    //设置:
    ctx.textBaseline="top"
    //alphabetic  默认,文本基线是普通的字母基线
    //top  文本基线是em方框的顶端
    //middle 文本基线是em方框的正中
    //ideographic 文本基线是表意基线
    //bottom 文本基线是em方框的底部
    //hanging 文本基线是悬挂基线
    //获取:
    ctx.textBaseline
    
    //返回包含指定文本宽度的对象
    ctx.measureText(text).width;
    //text:要测量的文本
</script>
  1. 清空矩形范围内所有元素
<script>
    ctx.clearRect(x,y,width,height)
    //一般都是清除整个画布,重绘画布
</script>

  1. 路径
<script>
    //绘制路径写起点和终点
    ctx.moveTO(x,y)
    ctx.lineTo(x,y)
    ctx.stroke()//绘制已定义路径
    ctx.strokeStyle="color"  绘制路径颜色
    ctx.fill()//填充已有路径
    ctx.fillStyle="color" //填充颜色
</script>
  1. 实例 弹幕
//看下面重新写一份

2. 新建HTML界面

<style>
    *{
      padding: 0;
      margin:0;
    }
    .container{
      width: 500px;
      height: 450px;
      position: relative;
      margin: 0 auto;
    }
    #cvs,#vdo{
      position: absolute;
      top: 0;
      left: 0
    }
    #cvs{
      z-index: 1;
      background-color: rgba(255, 119, 255, 0.589);
    }
    #vdo{
      height: 450px;
      width: 500px;
    }
    .wrap{
      width: 500px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      box-shadow: 0 2px 10px 2px #ccc;
      margin: 0 auto;
    }
  </style>
</head>
<body>
  <div class="container">
    <canvas id="cvs" height="380" width="500"></canvas>
    <video id="vdo" src="video.mp4" controls ></video>
    <!-- 和原始视频一样就可以了 -->
  </div>

  <!-- 获取输入的弹幕内容 -->
  <div class="wrap">
    <div class="userDiv">
      <!-- 输入弹幕内容 -->
      <input type="text" id="inputMsg" placeholder="输入弹幕"> 
      <!-- 输入弹幕颜色 -->
      <input type="color" name="" id="inputColor">
      <!-- 发送按钮 -->
      <input type="button" id="inputButton" value="发送">
    </div>
  </div>
  <!-- 准备两个js文件(main.js 用来调用函数/msg.js  用来定义函数) -->

html样式如下

在这里插入图片描述
然后设置两个js文件 一个叫main.js用来构造函数 一个叫msg.js用来调用函数

msg.js:

<script>
    //我们暂时需要的值有 :弹幕的x/y坐标,弹幕的内容,弹幕的速度,弹幕的字体大小,弹幕的字体颜色,弹幕的状态(false是未执行 ,true时正在执行)
    //构造一个函数,保存我们所需要的值
    var MsgObj = function(){
      this.x = [];//保存弹幕x坐标
      this.y = [];
      this.msg = [];//保存弹幕的内容
      this.spreed =[];//保存弹幕的速度
      this.fontSize = [];//保存弹幕的字体大小
      this.fontColor = [];//保存弹幕的字体颜色
      this.alive=[]//保存弹幕的状态 true绘制  false消失
}
    //为构造函数添加一个number属性,来保存我们弹幕在canvas画布中的数量
    MsgObj.prototype.number = 100;
    //初始化我们的弹幕 init
    MsgObj.prototype.init = function(){
        //因为每个值都需要初始化,所以我们用循环遍历
        for(var i=0;i<this.number;i++){
            this.x[i] = canWidth//canWidth是我们在main.js中写的画布宽度,因为要从右边开始执行我们的弹幕
            this.y[i] = 10;//随便给值 这个地方只是给个初始值而已 后面还会变动
            this.msg[i] = "";
            this.spreed[i] = 3;
            this.fontSize[i] = "16px";
            this.fontColor[i]="#f0f";
            this.alive[i]=false;
        }
    }

    //然后我们开始绘制我们的弹幕
    MsgObj.prototype.draw = function(){
        //绘制的弹幕也是每条弹幕都需要重新绘制,所以我们在每条弹幕重绘之前先给它清屏
        ctx.clearRect(0,0,500,380);
        //绘制弹幕也是用for循环来
        for(var i=0;i<this.number;i++){
            //而我们只有当弹幕未执行时才开始绘制
            if(this.alive[i]==false){
                //绘制我们的弹幕颜色(其实也就是弹幕的颜色)
                ctx.fillStyle = this.fontColor[i];
                //绘制我们的弹幕大小
                ctx.font = this.fontSize[i]+" 宋体";
                //绘制我们的弹幕移动
                //因为弹幕在移动 移动的是x的值
                this.x[i] -=this.spreed[i]
                ctx.fillText(this.msg[i],this.x[i],this.y[i],this.)
                //什么时候开始弹幕的关闭呢?当然是当我们的弹幕到头的时候
                if(this.x[i]<0){
                    this.alive[i] = false;
                    this.x[i]=canWidth;
                }
            }
        }
    }
    //然后咱们开始获取咱们输入的弹幕内容
    //这里就要先开始看我们的main.js了
    //main.js文件写完了就算完全获取到我们的弹幕内容了,现在我们只需要完善代码 写出我们输出弹幕的函数
    MsgObj.prototype.add = function(){
        //用循环来输出我们每次的弹幕内容
        for(var i=0;i<this.number;i++){
            //当我们的弹幕消失了过后才开始输出新的弹幕
            if(this.alive[i] == false){
                //输出弹幕的位置 也就是修改y的坐标,为什么不输出x的位置呢?因为x是我们绘制时会改变的东西,y坐标是我们在内容输出之前就要写好了然后展示出来,这里相当于展示的意思
                this.y[i] = Math.random()*canHeight;
                //输出的弹幕速度
                this.spreed[i]= Math.random(3,4)
                //弹幕的大小
                this.fontSize[i] = Math.floor(Math.random(16,20))
                //修改我们的弹幕内容(根据我们获取到的内容进行输出)
                this.msg[i]= obj.msg || "来一发弹幕···"
                //修改弹幕的颜色
                this.fontColor[i] = obj.fontColor;
                //最后我们需要修改我们的弹幕状态
                this.alive[i] = true;
                //因为我们每次只返回一条弹幕,所以要用一个return
                return;
            }
        }
    }
</script>

main.js

<script>
    //我们的全局变量
    var cvs; //保存画布
    var canWidth; //保存画布的宽度
    var canHeight; //保存画布的高度
    var inputMsg; //保存用户输入的弹幕内容
    var inputColor; //保存用户输入的弹幕颜色
    var inputButton; //保存发送按钮
    var msg; //保存实例化对象

    //当然对于全局的变量我们也需要初始化init
    var init = function(){
        cvs = document.getElementById("cvs");
        //保存画布的宽度和高度
        canWidth = cvs.width;
        canHeight = cvs.height;
        //保存画笔对象
        ctx = cvs.getContext("2d")
        //获取用户输入的内容
        inputMsg = document.getElementById("inputMsg");
        inputColor = document.getElementById("inputColor")
        inputButton = document.getElementById("inputButton")

        //实例化 msg对象(这一步是下面的发送函数来的东西)
        msg = new MsgObj();
        //再初始化我们实例化的对象
        msg.init();
        
        //当我们点击button按钮的时候 触发发送函数
        inputButton.addEventListener("click",sendAdd)
        
    }

    //发送函数
    function sendAdd(){
        //我们要发送的就是输入的内容字体和颜色 我们把它放在对象中
        var obj = {
            msg:inputMsg.value;
            fontColor:inputColor.value;
        }
        //将我们获取到的对象传到msg.js中
        msg.add(obj);
        //这里我们没有msg对象,所以我们要在初始化里面去实例化我们的msg对象
    }

    //最后开始绘制我们的页面
    var sendloop = function(){
        //使用智能定时器
        requestAnimationFrame(sendloop)
        //这里开始调用我们msg.js文件中的绘制函数 draw
        msg.draw()
    }
</script>

评论

this is is footer