Html5组件实现视频播放

最新推荐文章于 2024-07-18 15:09:36 发布

缘不易

最新推荐文章于 2024-07-18 15:09:36 发布

阅读量1.1k

点赞数 1

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/qq_45834006/article/details/108068891

版权

html5 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

定义和用法：
元素提供了播放、暂停和音量控件来控制视频。
同时元素元素也提供了 width 和 height 属性控制视频的尺寸. 如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。
与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。
元素支持多个元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  您的浏览器不支持Video标签。
</video>

视频格式与浏览器的支持：
当前，元素支持三种视频格式： MP4, WebM, 和 Ogg:
浏览器 MP4 WebM Ogg
IE YES NO NO
Chrome YES YES YES
Firefox YES YES YES
Safari YES NO NO
Opera YES YES YES

视频格式:
格式 MIME-type
MP4 video/mp4
WebM video/webm
Ogg video/ogg

HTML5 中的新属性：
属性值描述
autoplay autoplay 如果出现该属性，则视频在就绪后马上播放。
controls controls 如果出现该属性，则向用户显示控件，比如播放按钮。
height pixels 设置视频播放器的高度。
loop loop 如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted muted 规定视频的音频输出应该被静音。
poster URL 规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload preload 如果出现该属性，则视频在页面加载时进行加载，并预备播放。
如果使用 “autoplay”，则忽略该属性。
src url 要播放的视频的 URL。
width pixels 设置视频播放器的宽度。

HTML 音频/视频方法:
方法描述
addTextTrack() 向音频/视频添加新的文本轨道。
canPlayType() 检测浏览器是否能播放指定的音频/视频类型。
load() 重新加载音频/视频元素。
play() 开始播放音频/视频。
pause() 暂停当前播放的音频/视频。

<#if videoUrl?contains(".mp4")>
    <video id="videoId" class="video-full" >
        <source src="${videoUrl}" type="video/mp4" >
    </video>
<#else>
    <img alt="330x240" src="${insight.logo}" onclick="">
</#if>
<script type="text/javascript">
    $(document).ready(function() {
        $("#videoId").click(function() {
            videoPlay();
        });
    });

    function videoPlay() {
        var video = document.getElementById("videoId");
        if (video.paused) {
            video.play();
            $("#videoId").attr("controls", "controls");
        } else {
            video.pause();
            $("#videoId").removeAttr("controls");
        }
    };
</script>

案例二


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="stylesheet" href="iconfont/iconfont.css">
    <title></title>
    <style>
        /* ID选择器：ID选择器的名称以符号“#”开头，会影响页面中id属性值相同的元素
        （区分大小写，且id属性值应该是唯一的）。 */
        #video {
            width: 700px;
            height: 450px;
            margin: 0 auto;
            border: 1px solid silver;
        }
 
        #mp4par {
            position: relative;
            width: 700px;
            height: 450px;
            background-color: black;
            float: left;
            overflow: hidden;
        }
        #mp4 {
            position: relative;
            width: 700px;
            height: 450px;
        }
        #controls {
            position: absolute;
            width: 700px;
            height: 75px;
            bottom: -75px;
            z-index: 10;
            background-color: rgba(255, 255, 255, 0.31);
            text-align: center;
            transition: all 0.3s ease-in;
        }
        #mp4par:hover #controls{
            bottom: 0;
        }
        #btntime {
            width: 700px;
            outline: none;
        }
        #btnsound {
            position: relative;
            top: 5px;
        }
        button {
            position: relative;
            width: 40px;
            height: 20px;
            /* border-radius: 50%; */
            outline: none;
            border-style: none;
            /* background: radial-gradient(#ffae9f, #ff2f39); */
            margin: 18px;
            color: #474747;
        }
        .iconfont {
            font-size: 24px;
            color: #474747;
        }
    </style>
</head>
<body>
<div id="video">
    <div id="mp4par">
        <video id="mp4" src="1.mp4"></video>
        <div id="controls">
            <input type="range" id="btntime" value="0" max="100"><br>
            <span id="current_time" style='font-size: 12px;'>00:00:00</span>
            <button id="btnstart" >播放</button>
            <button id="btngo" >快进</button>
            <button id="btnback" >快退</button>
            <button id="btnmute" >静音</button>
            <input type="range" id="btnsound" value="10" max="100">
            <button id="btnbig">全屏</button>
            <span id="totaltime" style='font-size: 12px;'>00:00:00</span>
            <!-- <button><i class="iconfont">&#xe638;</i></button> -->
        </div>
    </div>
</div>
<script>
    var video = document.getElementById("mp4");
    var btnstart = document.getElementById("btnstart");
    var current_time=document.getElementById('current_time');
    var btntime = document.getElementById("btntime");
    var btngo = document.getElementById("btngo");
    var btnback = document.getElementById("btnback");
    var btnmute=document.getElementById("btnmute");
    var btnsound=document.getElementById("btnsound");
    var btnbig=document.getElementById("btnbig");
    var totaltime=document.getElementById('totaltime');
    //视频开始播放时执行
    video.onplaying = function () {
        //获取当前video的总时间
        var allTime = video.duration;
        var h=Math.floor(allTime/3600);
        var m=Math.floor(allTime%3600/60);
        var s=Math.floor(allTime%60);
        h=h>=10?h:'0'+h;
        m=m>=10?m:'0'+m;
        s=s>=10?s:'0'+s;
        totaltime.innerHTML=h+':'+m+':'+s;//allTime.toString();
    };
    //视频播放位置发生变化时开始执行
    video.ontimeupdate = function () {
        btntime.value =100*this.currentTime/this.duration;///this.totaltime;
        var time=this.currentTime;
        var h=Math.floor(time/3600);
        var m=Math.floor(time%3600/60);
        var s=Math.floor(time%60);
        h=h>=10?h:'0'+h;
        m=m>=10?m:'0'+m;
        s=s>=10?s:'0'+s;
        current_time.innerHTML=h+':'+m+':'+s;
    };
 
    //播放进度条的事件
    btntime.addEventListener("mousedown",function(){
        this.onmousemove=function(){
            video.currentTime=this.value*video.duration/100;
        }
        this.onmouseup=function(){
            this.onmousemove=null;
            this.onmouseup=null;
        }
    });
 
    //快进的点击事件
    btngo.addEventListener("click", function () {
        btnstart.innerHTML = "播放";
        video.pause();
        time = setInterval(function () {
            video.currentTime += 5;
        }, 1000);
    });
    //快退的点击事件
    btnback.addEventListener("click", function () {
        btnstart.innerHTML = "播放";
        video.pause();
        time = setInterval(function () {
            video.currentTime -= 2;
            if (video.currentTime <= 0) {
                video.play();
                clearInterval(time);
            }
        }, 1000);
    });
    //静音的点击事件
    btnmute.addEventListener("click",function(){
        video.muted=!video.muted;
    });
    //音量进度条的事件
    btnsound.addEventListener("mousedown",function(){
        this.onmousemove=function(){
            video.volume=this.value/100;
        }
        this.onmouseup=function(){
            this.onmousemove=null;
            this.onmouseup=null;
        }
    });
    //全屏的点击事件
    btnbig.addEventListener("click",function(){
        if (video.webkitRequestFullScreen) {
            video.webkitRequestFullScreen();
        }
        else if (video.mozRequestFullScreen) {
            video.mozRequestFullScreen();
        }
        else if (video.msRequestFullScreen) {
            video.msRequestFullScreen();
        }
        else if (video.RequestFullScreen) {
            video.RequestFullScreen();
        }
    });
    //播放的点击事件
    btnstart.addEventListener("click", function () {
        if (this.innerHTML == "播放") {
            video.play();
            this.innerHTML = "暂停";
        }
        else {
            video.pause();
            this.innerHTML = "播放";
        }
        clearInterval(time);
    })
</script>
</body>
</html>

缘不易

关注

1
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
Html5组件实现视频播放

定义和用法：元素提供了播放、暂停和音量控件来控制视频。同时元素元素也提供了 width 和 height 属性控制视频的尺寸. 如果设置的高度和宽度，所需的视频空间会在页面加载时保留。如果没有设置这些属性，浏览器不知道大小的视频，浏览器就不能再加载时保留特定的空间，页面就会根据原始视频的大小而改变。与标签之间插入的内容是提供给不支持 video 元素的浏览器显示的。元素支持多个元素. 元素可以链接不同的视频文件。浏览器将使用第一个可识别的格式：<video width="320" h
复制链接

扫一扫