html5中的多媒体标签

  • 标签:使用此标签可以直接插入视频文件(直接将视频塞入页面),它的本质上是调用本机上已经安装的软件,但是这种方式对于视频本身来说存在不可控,并且兼容性的问题也无法顾及。
  • 采用flash插件:首先需要安装flash,存在两个问题:1.学习flash增加成本;2.苹果设备不支持flash。

所以说在此之后的html5中新增了一些多媒体标签

支持 不支持
Internet Explorer 9+ Internet Explorer 8 以及更早的版本不支持
Firefox
Opera
Chrome
Safari
<audio src="./images/song.mp3" controls>
	 Your borwser does not support the audio tag.
audio>

注意事项:当设置宽高的时候,一般情况下只设置宽度或者高度,让其自动等比缩放。如果同时设置宽度和高度,那么视频并不会真正的调整到设置的宽高,除非设置值刚好是等比例的。且不同浏览器所支持的视频格式是不一样的 。

支持 不支持
Internet Explorer 9+ Internet Explorer 8 以及更早的版本不支持
Firefox
Opera
Chrome
Safari
<video src="../movie.ogv" width="320" height="240" controls='controls'>
    Your borwser does not support the video tag.
video>

解决浏览器所支持的视频格式是不一样的方法:采用source标签

  • 标签可以连接不同的视频文件。浏览器将会使用第一个可识别格式。
<video width="320" height="240" controls="controls">
    <source src="../movie.ogv">
    <source src="../movie.mp4">
    You borwser does not support the video tag.
video>
  • video常用DOM操作
    play():开始播放视频。
    pause():暂停当前播放的视频。
    playbackRate:改变播放速度。
  • video案例 完整代码:

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>video属性Dom控制title>
    <style>
        *{
      
            margin: 0;
            padding: 0;
        }
    style>
head>
<body>
    <div style="text-align: center;">
        <video src="./images/mov_bbb.mp4" preload="metadata" controls>video>
        
        <button onclick="playPause()">播放/暂停button>
        <button onclick="makeBig()">改变大button>
        <button onclick="makeSmall()">改变小button>
        <button onclick="playBack()">改变播放速度button>
    div>
    <script>
        //获取元素
        var myVideo = document.getElementsByTagName('video')[0]
        //播放暂停方法
        function playPause(){
      
            //如果视频此时的状态是暂停状态,则点击时调用播放方法;否则调用暂停方法
            if(myVideo.paused){
      
                myVideo.play()
            }else{
      
                myVideo.pause()
            }
        }
        //增大宽度
        function makeBig(){
      
            myVideo.width = 560;
        }
        //减小宽度
        function makeSmall(){
      
            myVideo.width = 320;
        }
        //改变播放速度
        function playBack(){
      
            var speed = 2;
            myVideo.playbackRate = speed;
        }
    script>
body>
html>

结束微语:掩埋了泪眼的斑驳,在转角之后扣上故事门锁

你可能感兴趣的:(html5)