H5新增属性

最新推荐文章于 2024-08-31 17:25:57 发布

小姜思

最新推荐文章于 2024-08-31 17:25:57 发布

阅读量574

点赞数

文章标签： java 数据库 servlet

本文链接：https://blog.csdn.net/weixin_45813597/article/details/126623919

版权

1. 媒体元素

1. video

H5中的video标签可以向使用img显示图片一样简单去播放视频。video提供了很多属性和方法，我们可以通过直接设定或者通过js控制视频的显示

读写属性：

1. controls 代表进度条

2. autoplay 自动播放

3. loop循环播放

4. poster 封面

5. src 连接到视频得地址

6. width height 宽高一般不一起设置

方法 :

1. play 播放

2. pause 暂停

3. paused 切换,是否是暂停状态

4. volume 控制音量

5. currentTime 当前播放秒数

6. playbackRate 倍速播放

1.属性:进度条controls
<video src="./音视频/1.mp4"  controls> </video>
2.页面一加载是否自动播放autoplay
<video src="./音视频/1.mp4"  controls autoplay> </video>
3.post封面
<video src="./音视频/1.mp4" poster='./img/1.jpg'> </video>
4.是否循环播放loop
<video src="./音视频/1.mp4" controls loop> </video>
5.muted静音
<video src="./音视频/1.mp4" controls loop autoplay> </video>

// 方法
 <script>
        $(function() {
             // 获取视频标签
             var video = $('video')[0]
            // 给这一类按钮绑定事件
            $('button').click(function() {
                if($(this).text() === '播放'){
                    video.play()
                }
                // 暂停视频
                if($(this).text() === '暂停') {
                    video.pause()
                }
                // 切换 视频播放进行暂停 视频暂停进行播放
                if($(this).text() === '切换') {
                    // video.paused为true 代表暂停
                    console.log(video.paused);
                    if(video.paused) {
                        video.play()
                    }else {
                        video.pause()
                    }

                }
                // 控制音量+-
                if ($(this).text() === '音量+') {
                    // volume 0-1阈值  
                    // video.volume += 0.1;
                    // console.log(video.volume);
                    video.volume = (video.volume>0.9?0.9:video.volume)+0.1
                }
                // 音量-
                if ($(this).text() === '音量-') {
                    // video.volume -= 0.1;
                    video.volume = (video.volume<0.1?0.1:video.volume)-0.1
                }
                // 控制视频快进
                if($(this).text() === '快进') {
                    // 以秒为单位
                    video.currentTime += 10;
                }
                if($(this).text() === '快退') {
                    // 以秒为单位
                    video.currentTime -= 10;
                }
                // 倍速播放
                if($(this).text() === '倍速播放') {
                    // >1 快速播放
                    // <1 慢速播放
                    video.playbackRate = 3;
                }
            })
        })
    </script>
<body>
    <button>播放</button>
    <button>暂停</button>
    <button>切换</button>
    <button>音量+</button>
    <button>音量-</button>
    <button>快进</button>
    <button>快退</button>
    <button>倍速播放</button>
</body>

2. audio 音频

audio元素与video类似，是用来播放音频的。其属性方法事件也几乎与video元素一致.

<!-- 不加进度条相当于背景音乐 -->
<audio src="./音视频/1.mp3" autoplay loop></audio>

2. 画布

1.基本用法
(1)获取canvas对象--获取画布
	通过document.getElementById()等方法取得canvas对象。
(2)取得上下文(context)--获取画笔
    图形上下文是一个封装了很多绘图功能的对象，参数只能是“2d”
(3)定义填充样式
    context.fillStyle='red';
(4)绘制填充图形
    context.fillRect(10,10,100,100)//第一个参数是x轴开始位置，第二个参数是y轴开始位置，第三个参数是绘制图形的宽，第四个位置是绘制图形的高

<!-- 画布元素 -->
<canvas width="400px" height="400px"></canvas>
<script>
    // 1.获取画布
    var canvas = document.querySelector('canvas');
    // 2.获取画笔 上下文对象
    var context = canvas.getContext('2d');
    // 3.给图形设置填充样式
    // context.fillStyle = 'red';   // 实心填充
    // 4.绘制图形  绘制填充矩形
    // fillRect 参数 x轴起始位置 y轴起始位置 宽 高
    // context.fillRect(0,0,200,200);
    // 绘制轮廓矩形
    // 3.给图形设置填充样式
    context.strokeStyle = 'blue';
    // 给轮廓矩形设置线宽
    context.lineWidth = 8;
    // 4.绘制图形
    // strokeRect 参数 x轴起始位置 y轴起始位置 宽 高
    context.strokeRect(100,100,100,100);
    // 清除画布一部分区域
    // context.clearRect(100,100,50,50)
    // 清除画布全部区域
    // context.clearRect(0,0,400,400)
</script>

绘制圆

 <!-- 设置画布 -->
    <canvas width="400px" height="400px"></canvas>
    <script>
        // 1.获取画布
        var canvas = document.querySelector('canvas');
        // 2.获取画笔 上下文对象
        var context = canvas.getContext('2d');
        // 3.需要给开始路径
        context.beginPath();
        // 4.绘制圆  arc 参数：x y 轴开始位置 r半径 开始弧度Math.PI(180°) 结束弧度 布尔值
        // true 代表逆时针绘制
        context.arc(100,100,100,0,Math.PI*2,true);
        // 5.绘制图的填充样式
        context.fillStyle = 'blue';
        // 6.绘制圆形
        context.fill();
        // 7.需要给结束路径
        context.closePath()

圆的移动

<canvas width="600px" height="600px"></canvas>
    <script>
        // 1.获取画布
        var canvas = document.querySelector('canvas');
        // 2.获取画笔 上下文对象
        var context = canvas.getContext('2d');
        // 3.需要给开始路径
        var obj = {
            x: 100,
            y: 100,
            r: 100,
            color: 'yellow'
        };
        // 声明绘制圆的方法
        function draw(obj) {
            context.beginPath()
            context.arc(obj.x, obj.y, obj.r, 0, Math.PI*2)
            // 绘制填充圆
            // context.fillStyle = obj.color;
            // 绘制轮廓圆
            context.strokeStyle = obj.color;
            // 绘制圆
            // context.fill();
            // 绘制轮廓圆
            context.stroke()
            context.closePath();
        }
        // 声明圆移动的方法
        function move (obj) {
            obj.x += 5;
            obj.y += 5;
            draw(obj);
        }
        setInterval(function(){
            // 清除原先的圆
            context.clearRect(0,0,600,600)
            move(obj)
        },500)
        draw(obj);
    </script>

渐变

 <canvas width="600px" height="600px"></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');
        // 3. 绘制一个线性渐变图形
        // 3.1 创建一个线性渐变对象
        // createLinearGradient 参数 0 0 400 400
        var l = context.createLinearGradient(0,0,400,400);
        // 3.2 给渐变图形填充颜色  addColorStop 参数 0-1阈值 填充百分比  颜色
        l.addColorStop(0, 'red')
        l.addColorStop(0.25, 'blue')
        l.addColorStop(0.5, 'pink')
        l.addColorStop(0.75, 'cyan')
        l.addColorStop(1, 'yellow')
        // 4. 将渐变对象给到图形填充样式
        context.fillStyle = l;
        // 5. 绘制填充图形
        context.fillRect(0,0,400,400);
    </script>

径向渐变

<canvas width="600px" height="600px"></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');
        // 3. 绘制一个径向渐变图形
        // 3.1 创建一个径向渐变对象
        // createLinearGradient 
        // 参数 小圆x y r 大圆 x y r
        var g = context.createRadialGradient(200,200,100,200,200,200);
        // 3.2 给径向图形填充颜色  addColorStop 参数 0-1阈值 填充百分比  颜色
        g.addColorStop(0, 'blue')
        g.addColorStop(0.25, 'yellow')
        g.addColorStop(0.5, 'pink')
        g.addColorStop(0.75, 'cyan')
        g.addColorStop(1, 'red')
        // 4. 将径向对象给到图形填充样式
        context.fillStyle = g;
        // 5. 绘制填充图形
        context.fillRect(0,0,400,400);
    </script>

绘制线段

 <canvas width="400px" height="400px"></canvas>
    <script>
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');
        context.lineWidth = 8;
        // 需要开始路径
        context.beginPath();
        // 绘制线段
        context.moveTo(0,0);
        context.lineTo(100,100);
        context.lineTo(200,10);
        context.lineTo(300,100);
        // 结束路径
        context.closePath();
        // 给线段设置颜色
        context.strokeStyle = 'cyan';
        // 绘制线段
        context.stroke();
       
    </script>

绘制图片和视频

   <canvas width="400px" height="400px"></canvas>
    <video controls src="./音视频/1.mp4" width="400px"></video>
    <script>
        var canvas = document.querySelector('canvas');
        var context = canvas.getContext('2d');
        // 创建一个img标签 构造函数方式
        // var img = new Image();
        // console.log(img);
        // img.src = './音视频/2.jpg';
        // img.onload = function() {
        //     context.drawImage(img, 0, 0, 100, 100)
        // }
        // 绘制视频
        // var video = document.querySelector('video');
        // function draw() {
        //     context.drawImage(video,0,0,300,300);
        //     requestAnimationFrame(draw)
        // }
        // draw()
        // 绘制文本
        context.font = '18px bold';
        // context.fillText('hello world', 100, 100)
        context.strokeText('hello world', 100, 100)
    </script>