video标签_video标签 层级 - CSDN
精华内容
参与话题
  • HTML5 video标签的播放控制

    千次阅读 2019-01-07 16:36:12
    这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长、播放、暂停、获取影片的播放时间和设置播放点、音量的获取和设置等内容,需要的朋友可以参考下   上一篇介绍了html5标签video(播放器)...

    转自http://www.php.cn/html5-tutorial-402832.html

    这篇文章主要介绍了HTML5 video标签的播放控制,本文讲解了获取影片总时长、播放、暂停、获取影片的播放时间和设置播放点、音量的获取和设置等内容,需要的朋友可以参考下

     

    上一篇介绍了html5标签video(播放器)初始化需要做的一些工作,如何简单快速使用html5的播放器,本文将重点介绍如何用JS来操作video标签,也就是如何对video做一些简单基本的操作,包括了播放器的播放、暂停,音量的读取、设置等写相关操作,从而开始播放器的扩展之路。

    本文的目录:

    1.获取影片总时长
    2.播放、暂停
    3.获取影片已播放时间和设置播放点
    4.音量的获取和设置

    第一、获取影片总时长

    对播放器(video)操作,首先要得到的是影片的一些信息,其中一个就是总时长,除了内容以为,总时长也是第一时间要显示的。在对video进行操作的的前先给video标签添加一个ID,这样方便我们获取video元素

    1

    2

    3

    4

    <video id="myVideo" controls preload="auto" width=300 height="165"

         poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"

         src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

        </video>

    设置一个ID后,那么就可以开始操作了,要获取总时长,要用到video的一个事件-loadedmetadata,这个事件的触发表示元数据(媒体的一些基本信息)已经加载完成,用addEventListener监听事件

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    var myVideo = document.getElementById('myVideo');//获取video元素

    myVideo.addEventListener("loadedmetadata", function(){

        //要执行的代码

    });

         好了,已经监听了,那么接下来要做的就是获取总时长,其实就是一个属性-duration

    var myVideo = document.getElementById('myVideo')//获取video元素

        ,tol = 0

    ;

    myVideo.addEventListener("loadedmetadata", function(){

        tol = myVideo.duration;//获取总时长

    });

    需要注意的是获取到的在总时长的单位为秒,显示的时候根据需要去转换。

    第二、播放、暂停

    对播放器来说最基本的一个功能就是播放和暂停了,而在获取总时长后,接着的操作也就是播放和暂停。这个时候用到了video的两个方法就是play和pause

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    var myVideo = document.getElementById('myVideo')//获取video元素

        ,tol = 0

    ;

    myVideo.addEventListener("loadedmetadata", function(){

      tol = myVideo.duration;//获取总时长

     });</p>

    <p> //播放

     function play(){

         myVideo.play();

     }</p>

    <p> //暂停

     function pause(){

         myVideo.pause();

     }

    需要注意的是,当播放结束后再运行play方法将会从头播放。

    第三、获取影片的播放时间和设置播放点

    播放器能播放和暂停后,那么接下来需要看到的就是影片播放了多久,播放到哪个时间点了。这个操作跟获取总时长很相似,都是需要监听一个事件和获取一个属性的值,那么用到的是video的timeupdate事件和currentTime属性

    1

    2

    3

    4

    5

    //播放时间点更新时

    myVideo.addEventListener("timeupdate", function(){

       var currentTime = myVideo.currentTime;//获取当前播放时间

       console.log(currentTime);//在调试器中打印

    });

    运行后会在控制台看到很多数据...

    我们经常会接到一个要求,那就是上次看到了10分钟了,这次看要从第十分钟开始看,那么这个时候就需要设置播放点了,设置播放点用得还是currentTime属性,currentTime属性是可读写的,要注意的是设置值的单位是秒,如果播放点不是秒为单位那就要进行转换 

    1

    2

    3

    4

    //设置播放点

    function playBySeconds(num){

        myVideo.currentTime = num;

    }

    第四、音量的获取和设置

    播放器播放的过程中能暂停、播放,知道现在播放到哪里了和可以从某个时间点开始播放,那么接下来操作的就是音量了。这一点跟第三相似,获取音量可以直接用volume属性就可以了,但是在这里还要介绍的是音量改变的触发事件,方面以后需要自定义UI使用,那就是volumechange事件

    1

    2

    3

    4

    5

    //音量改变时

    myVideo.addEventListener("volumechange", function(){

       var volume = myVideo.volume;//获取当前音量

       console.log(volume);//在调试器中打印

    });

    当你通过控制条来改变音量时,你会看到调试里面有很多数据。要注意的是音量的范围值为0~1,一般在UI中都是用百分比,所以需要的时候要进行转换。

    音量是可以通过改变属性来设置的,跟播放的时间点是相似的,只不过音量设置的是volume属性

    1

    2

    3

    4

    //设置音量

    function setVol(num){

       myVideo.volume = num;

    }

    下面是完整的代码:

    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    <!DOCTYPE html>

    <html>

    <head>

       <title>Video step2</title>

       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

    </head>

    <body>

       <video id="myVideo" controls preload="auto" width=300 height="165"

       poster="http://img0.ph.126.net/I10JqUUJDmlEtE_XYl4hOg==/6608842237655242020.jpg"

       src="http://www.w3cschool.cc/try/demo_source/mov_bbb.mp4">

       </video>

    <script>

    var myVideo = document.getElementById('myVideo')//获取video元素

       ,tol = 0 //总时长

    ;

    myVideo.addEventListener("loadedmetadata", function(){

       tol = myVideo.duration;//获取总时长

    });</p> <p>//播放

    function play(){

       myVideo.play();

    }</p> <p>//暂停

    function pause(){

       myVideo.pause();

    }</p> <p>//播放时间点更新时

    myVideo.addEventListener("timeupdate", function(){

       var currentTime = myVideo.currentTime;//获取当前播放时间

       console.log(currentTime);//在调试器中打印

    });</p> <p>//设置播放点

    function playBySeconds(num){

       myVideo.currentTime = num;

    }</p> <p>//音量改变时

    myVideo.addEventListener("volumechange", function(){

       var volume = myVideo.volume;//获取当前音量

       console.log(volume);//在调试器中打印

    });</p> <p>//设置音量

    function setVol(num){

       myVideo.volume = num;

    }

    </script>

    </body>

    </html>


    总结:通过这四个步骤来了解html5标签video(播放器)的基本操作,而这些操作主要是通过JS来监听video的事件和对video属性的读写来完成的,熟悉这四点即可灵活的在使用播放器,再根据应用场景来调整即可。

    展开全文
  • 关于H5中的video标签的用法总结

    千次阅读 2018-09-29 18:02:16
    写了一个H5播放视频的功能, 遇到一些问题,记录一下,借鉴了一些...现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持...

    https://blog.csdn.net/qq_34645412/article/details/78722729

    写了一个H5播放视频的功能, 遇到一些问题,记录一下,借鉴了一些博友的文章,如果有侵权请联系删除

     

     

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面来认识HTML 5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件。

    Video标签的使用

    Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性, 以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外,还可以包含当指定的视频都不能 播放时,返回的内容。

    (1) src属性和poster属性

    你能想象src属性是用来干啥的。跟<img>标签的一样,这个属性用于指定视频的地址。而poster属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>

     

    (2) preload属性

    这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

     

    None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。

    Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等)。

    Auto:全部预加载。

    (3) autoplay属性

    又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉是表示不自动播放。

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

     

    注意,HTML中布尔属性的值不是true和false。正确的用法是,在标签中使用此属性表示true,此时属性要么没有值,要么其值恒等于他的名字 (此处,自动播放为<video autoplay />或者<video autoplay=”autoplay” />);而在标签中不使用此属性表示false(此处不进行自动播放为<video />)。

     (4) loop属性

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>

     

    一目了然,loop属性用于指定视频是否循环播放,同样是一个布尔属性。

    (5) controls属性

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>

     

    Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器启用本身的播放控制栏。

    控制栏须包括播放暂停控制,播放进度控制,音量控制等等。

    每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题,Firefox和Safari的Video标签不正常,所以这两个只能在网上找截图了。

    (6) width属性和height属性

    属于标签的通用属性了,这个不用多说。

    (7) source标签

    <video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>

     

    Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用。

    浏览器按source标签的顺序检测标签指定的视频是否能够播放(可能是视频格式不支持,视频不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义,不能单独出现。

    此标签包含src、type、media三个属性。

    src属性:用于指定媒体的地址,和video标签的一样。

    Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

    Media属性:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。你想到<style>标签的media属性了么?一样一样一样的。

    (8) 一个完整的例子

    <video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>

     

    这段代码在页面中定义了一个视频,此视频的预览图为poster的属性值,显示浏览器的默认媒体控制栏,预加载视频的元数据,循环播放,宽度为900像素,高度为240像素。

    第一选择视频地址为第一个source标签的src属性值,视频类别为Ogg视频,视频编码译码器为Theora,音频编码译码器为Vorbis,播放媒 介为显示器;第二选择视频地址不再累述。如果你还要兼容IE的话,可以在最后一个source标签后再加上Flash播放器的标签集,或者使用一点 JavaScript代码。

     

    preload 属性规定是否在页面加载后载入视频。

    如果设置了 autoplay 属性,则忽略该属性。

    HTML 4.01 与 HTML 5 之间的差异

    preload 属性是 HTML 5 中的新属性。

    语法

    <video preload="load" />

    属性值

    描述
    load

    规定是否预加载视频。

    可能的值:

    • auto - 当页面加载后载入整个视频
    • meta - 当页面加载后只载入元数据
    • none - 当页面加载后不载入视频

    1. 如何获取视频的加载进度,让视频加载完成后才让用户进入?

     

    不能,没有任何的办法来判断视频的加载进度,而且在iOS中,只有视频在播放的时候,才临时去加载视频。因此,即使在video标签中写了preload属性也是不管用的。使用canplaythrough事件也是没法检测的,虽然video标签在加载的时候会触发canplaythrough方法,但播放时依然会有卡顿的现象,而且某些android还不支持次属性。

    2. 播放视频时只有声音没有图像

    有部分原因是视频的编码不正确,在mp4格式的视频中,只支持h.264的视频。我的项目中也遇到了这种情况,但不是视频编码的问题。我在自己的网络下测试时,没有这样的问题,但是在外部环境测试时就会出现黑屏、有声音没图像的情况。那么应该就是视频有点大了,然后我就把视频压缩了一下,结果还是会有这样的情况出现。

    经过同事的指点,我在用户点击和视频正式播放之前添加一个loading效果,当视频正式播放的时候就取消loading。如下:

    
     
    1. function video_loading( $video ){

    2. $('.video_loading').show();

    3.  
    4. var timer = setInterval(function(){

    5. var currentTime = $video[0].currentTime; // 检测当前的播放时间

    6.  
    7. if( currentTime>0 ){

    8. $('.video_loading').hide();

    9. clearInterval( timer );

    10. }

    11. }, 100)

    12. }

    完美解决黑屏和有声音没图像的问题。

    看起来比较杂乱,时间匆忙记录

    --------------------- 本文来自 傻小胖 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/qq_34645412/article/details/78722729?utm_source=copy

    展开全文
  • videosrc="hangge.mp4"controls&gt;&lt;/video&gt;· 12,通过width和height设置视频窗口大小&lt;videosrc="hangge.mp4"controlswidth="400"height="300"...

    1,下面是一个播放视频的最简单样例 
    (controls属性告诉浏览器要有基本播放控件)

    <videosrc="hangge.mp4"controls></video>

    ·      1

    2,通过width和height设置视频窗口大小

    <videosrc="hangge.mp4"controlswidth="400"height="300"></video>

    ·      1

    3,预加载媒体文件 
    设置preload不同的属性值,可以告诉浏览器应该怎样加载一个媒体文件: 
    (1)值为auto:让浏览器自动下载整个文件 
    (2)值为none:让浏览器不必预先下载文件 
    (3)值为metadata:让浏览器先获取视频文件开头的数据块,从而足以确定一些基本信息(比如视频的总时长,第一帧图像等)

    <!-- 用户点击播放才开始下载 -->

    <videosrc="hangge.mp4"controlspreload="none"></video>

    4,自动播放 
    (1)使用autoplay属性可以让浏览器加载完视频文件后立即播放。

    <videosrc="hangge.mp4"controlsautoplay></video>

    (2)如果启用自动播放,可以将播放器设置为muted状态。这样自动播放时会静音,防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。

    <videosrc="hangge.mp4"controlsautoplaymuted></video>

    5,循环播放 
    使用loop属性让视频播放结束时,再从头开始播放。

    <videosrc="hangge.mp4"controlsloop></video>

    6,设置替换视频的图片(封面图片) 
    通过poster属性可以设置,浏览器在下面三种情况下会使用这个图片: 
    (1)视频第一帧未加载完毕 
    (2)把preload属性设置为none 
    (3)没有找到指定的视频文件

    <videosrc="hangge.mp4"controlsposter="hangge.png"></video>

    7,浏览器兼容,如何让每一个浏览器都能顺利播放视频 
    现在大部分浏览器都能支持H.264格式的视频,但Opera浏览器却一直不支持。我们需要通过后备措施保证每个人都能看到视频,通常有下面几种方案: 
    (1)使用多种视频格式 
    <video><audio>元素有个内置的格式后备系统。我们不使用src属性,而是在其内部嵌套一组<source>元素,浏览器会选择播放第一个它所支持的文件。 
    我们可以添加WebM格式的视频提供对Opera的支持。

    <video controls>

        <source src="hangge.mp4"type="video/mp4">

        <source src="hangge.webm"type="video/webm">

    </video>

    (2)添加Flash后备措施(推荐) 
    上面那个方法不推荐,应为Opera浏览器只占不到1%的份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的,同时Flash还能兼容IE8这种连<video>元素都不支持的老浏览器。

    这里使用Flowplayer Flash作为备用播放器(本地下载 :flowplayer-3.2.18.zip

    <video controls>

        <source src="hangge.mp4"type="video/mp4">

        <source src="hangge.webm"type="video/webm">

     

        <object id="flowplayer" width="400" height="300"

            data="flowplayer-3.2.18.swf"

            type="application/x-shockwave-flash">

            <param name="movie"value="flowplayer-3.2.18.swf">

            <param name="flashvars"value='config={"clip":"hangge.mp4"}'>

        </object>

    </video>

    (3)也有人优先使用Flash,而HTML5作为后备措施。 
    这么做是因为Flash普及率比较高,而HTML5作为后备可以扩展iPad和iPhone用户

    <object id="flowplayer" width="400" height="300"

        data="flowplayer-3.2.18.swf"

        type="application/x-shockwave-flash">

        <paramname="movie"value="flowplayer-3.2.18.swf">

        <paramname="flashvars"value='config={"clip":"hangge.mp4"}'>

     

        <videocontrols>

            <sourcesrc="hangge.mp4"type="video/mp4">

            <sourcesrc="hangge.webm"type="video/webm">

        </video>

    </object>

     

    更多技术文章,关注微信公众号“挨踢学霸”


    展开全文
  • html5 video 视频标签详解

    千次阅读 2016-09-13 17:08:57
    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。...

    现在如果要在页面中使用video标签,需要考虑三种情况,支持Ogg Theora或者VP8(如果这玩意儿没出事的话)的(Opera、Mozilla、Chrome),支持H.264的(Safari、IE 9、Chrome),都不支持的(IE6、7、8)。好吧,现在让我们从技术层面来认识HTML 5的视频,包括video标签的使用,视频对象可以用到的媒介属性和方法,以及媒介事件。

    Video标签的使用

    Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性, 以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外,还可以包含当指定的视频都不能 播放时,返回的内容。

    (1) src属性和poster属性

    你能想象src属性是用来干啥的。跟<img>标签的一样,这个属性用于指定视频的地址。而poster属性用于指定一张图片,在当前视频数据无效时显示(预览图)。视频数据无效可能是视频正在加载,可能是视频地址错误等等。

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay"></video>

     

    (2) preload属性

    这个属性也能通过名字了解用处,此属性用于定义视频是否预加载。属性有三个可选择的值:none、metadata、auto。如果不使用此属性,默认为auto。

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

     

    None:不进行预加载。使用此属性值,可能是页面制作者认为用户不期望此视频,或者减少HTTP请求。

    Metadata:部分预加载。使用此属性值,代表页面制作者认为用户不期望此视频,但为用户提供一些元数据(包括尺寸,第一帧,曲目列表,持续时间等等)。

    Auto:全部预加载。

    (3) autoplay属性

    又是一个看名字知道用处的属性。Autoplay属性用于设置视频是否自动播放,是一个布尔属性。当出现时,表示自动播放,去掉是表示不自动播放。

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none"></video>

     

    注意,HTML中布尔属性的值不是true和false。正确的用法是,在标签中使用此属性表示true,此时属性要么没有值,要么其值恒等于他的名字 (此处,自动播放为<video autoplay />或者<video autoplay=”autoplay” />);而在标签中不使用此属性表示false(此处不进行自动播放为<video />)。

     (4) loop属性

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" loop="loop"></video>

     

    一目了然,loop属性用于指定视频是否循环播放,同样是一个布尔属性。

    (5) controls属性

    <video width="658" height="444" src="http://www.youname.com/images/first.mp4" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"></video>

     

    Controls属性用于向浏览器指明页面制作者没有使用脚本生成播放控制器,需要浏览器启用本身的播放控制栏。

    控制栏须包括播放暂停控制,播放进度控制,音量控制等等。

    每个浏览器默认的播放控制栏在界面上不一样。由于我浏览器的诡异问题,Firefox和Safari的Video标签不正常,所以这两个只能在网上找截图了。

    (6) width属性和height属性

    属于标签的通用属性了,这个不用多说。

    (7) source标签

    <video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>

     

    Source标签用于给媒体(因为audio标签同样可以包含此标签,所以这儿用媒体,而不是视频)指定多个可选择的(浏览器最终只能选一个)文件地址,且只能在媒体标签没有使用src属性时使用。

    浏览器按source标签的顺序检测标签指定的视频是否能够播放(可能是视频格式不支持,视频不存在等等),如果不能播放,换下一个。此方法多用于兼容不同的浏览器。Source标签本身不代表任何含义,不能单独出现。

    此标签包含src、type、media三个属性。

    src属性:用于指定媒体的地址,和video标签的一样。

    Type属性:用于说明src属性指定媒体的类型,帮助浏览器在获取媒体前判断是否支持此类别的媒体格式。

    Media属性:用于说明媒体在何种媒介中使用,不设置时默认值为all,表示支持所有媒介。你想到<style>标签的media属性了么?一样一样一样的。

    (8) 一个完整的例子

    <video width="658" height="444" poster="http://www.youname.com/images/first.png" autoplay="autoplay" preload="none" controls="controls"><source src="http://www.youname.com/images/first.ogv" /><source src="http://www.youname.com/images/first.ogg" /></video>

     

    这段代码在页面中定义了一个视频,此视频的预览图为poster的属性值,显示浏览器的默认媒体控制栏,预加载视频的元数据,循环播放,宽度为900像素,高度为240像素。

    第一选择视频地址为第一个source标签的src属性值,视频类别为Ogg视频,视频编码译码器为Theora,音频编码译码器为Vorbis,播放媒 介为显示器;第二选择视频地址不再累述。如果你还要兼容IE的话,可以在最后一个source标签后再加上Flash播放器的标签集,或者使用一点 JavaScript代码。

    展开全文
  • video标签

    2019-08-20 19:12:47
    Video标签的使用 Video标签含有src、poster、preload、autoplay、loop、controls、width、height等几个属性, 以及一个内部使用的标签<source>。Video标签内除了可以包含<source>标签外,还可以包含当...
  • H5中的video标签使用

    千次阅读 2018-11-16 14:21:30
    video src="hangge.mp4" controls&gt;&lt;/video&gt;   2,通过width和height设置视频窗口大小 &lt;video src="hangge.mp4" controls width="400" height="...
  • Video标签

    2019-02-25 09:31:56
    1、标签属性 属性 描述 autoplay 该属性使得视频在就绪后马上播放。 controls 该属性向用户显示控件,比如播放按钮。 height 设置视频播放器的高度。 width 设置视频播放器的宽度。 loop 当媒介文件...
  • Video标签的属性

    千次阅读 2019-02-22 15:46:46
    撰写时间:2019年02月06日 Video的属性有 src:视频的属性,poster:视频封面;没有播放时显示的图片;...下图我们用了video标签的src属性,controls属性,poster属性,with和height属性,loop属性,a...
  • [HTML5] Video 标签播放及控制视频

    万次阅读 2015-03-08 22:00:38
    、webm 等格式的视频,Video 标签的引入,减少前端页面对 Flash 动画的依赖。0x0 预备知识不同的浏览器支持的视频格式可能不同,以下是摘自 W3School 各个浏览器对三种视频格式的支持情况: 0x1 在 Video 中嵌入...
  • html中的video标签

    2019-08-23 17:05:10
    video标签: <video src="视频的后缀名是.webM/.ogg/.mp4 "></video> 属性:src:用于告诉video标签需要播放的视频地址 autoplay:用于告诉video标签是否需要自动播放视频 controls:用于是否显示控制条...
  • 当时我也很好奇MP4视频可以用video标签播放呀,我就经常用,毕竟是好朋友我还是亲自去筛查了一下问题,这不结论处来了,其实就是一个视频编码的问题,格式虽然都是MP4但是html中只支持H.264的编码格式,无奈只能重新...
  • 在日常项目中,html5的video标签还是比较常用到的,开发过程中,我们都会注意到,通过监听video标签的播放、暂停、停止等等来使用; 但我们是否也会遇到过,有些浏览器在显示这标签,兼容不太友好,video标签的...
  • 今天开发小哥哥找我调样式,一看,video,心里有点慌啊,之前没有接触video标签,小哥哥说给video设置了和左边图片一样的高度,但就是比图片矮一截,好吧,调了两下高度,调不动,哎呀回去研究一下吧,然后就回来...
  • video标签显示问题

    2019-08-07 18:12:44
    最近在弄视频文件播放,出现了给video标签src赋视频文件路径,但是用来测试的mp4文件可以正常显示,而tup运行时生成的mp4文件却不能显示,video标签已经读取了mp4文件的资源,但是显示为空白。 经过百度,h5的video...
  • 在写web项目的时候,遇到简介页面有一个单独的简介视频,只有这一个短短的视频所以没有使用任何video组件,所以运用原生video标签就想解决问题。 虽然简介视频是非付费的,但也不希望会有下载按钮或者可以视频另存...
  • video为H5新标签,支持三种视频格式:MP4、WebM、Ogg ...如果在 开始标签和结束标签之间填写了文本内容,那么在不兼容video标签的浏览器中会显示文本信息。 接下来详述一下video标签的可选属性: autoplay:auto...
  • 首先说一下我在使用video标签时遇到的问题 1.在页面打开视频,第一次打开页面无法播放视频(根本就没有加载),第二次打开才能播放 2.播放的视频不是想要看到的,浏览器F12后看到地址确实改变了,但是播放的视频还是...
  • video标签沉浸式播放解决方案

    千次阅读 2018-07-23 00:06:48
    “沉浸播放式”这个概念是我从Android开发里面的沉浸式引申过来的一个概念,沉浸式其实就是隐藏页面顶部的...那么回到前端开发,让我们看一下如何让video标签呈现这种沉浸式的播放效果,平常我们使用video标签都...
  • 填坑 —— chrome video标签 autoplay无效

    万次阅读 2018-09-13 13:37:19
    最近写的页面在chrome中打开时,video标签都不能自动播放(奇怪的是相同的视频,两个月前在chrome下播放还是正常的;但现在,mac下一直无法播放,只有在controls的模式下点击播放按钮才可以播放;而windows下按F5...
  • video标签流式加载

    千次阅读 2019-06-24 22:43:15
    video标签 浏览器的video标签通常是接收一个src属性,然后浏览器就会根据这个src属性来自动加载视频。 这个过程是浏览器来加载video的。 这种方式有什么问题吗? mp4文件不能流式加载 webm,flv,hls等格式兼容性...
1 2 3 4 5 ... 20
收藏数 59,908
精华内容 23,963
关键字:

video标签