video | web

# video

标签的属性配置

 autoplay  =>  自动播放
 controls   =>  是否显示控件
 width       =>  播放器的宽度
 height     =>  播放器的高度
 loop        =>  是否循环播放
 muted     =>  是否静音播放
 poster     =>  视频封面
 src          =>   播放源
 preload   =>   页面加载时进行加载 , 如果有autoplay那么该属性就会被无视

标签的js接口

play()        =>  播放
pause()    =>   暂停
currentTime  => 当前播放的位置(s)
duration       => 长度(s)
volume        => 音量
muted          => 静音(boolean)

事件

timeupdate => 根据播放时间变化而触发的事件

注意:该事件只能用addEventListener来定义

let ovideo = document.getElementById('vid');
ovideo.addEventListener('timeupdate', function () {
       console.log(`当前的时间点是${ovideo.currentTime},视频长度是${ovideo.duration}`);
}, false)

全屏和退出全屏


let fullScreen = elem => {
    let ele = elem;
    if (document.requestFullscreen) {
    　　ele.requestFullscreen();       //w3c标签
    } else if (document.mozRequestFullScreen) {
       ele.mozRequestFullScreen();     //FireFox
    } else if (document.webkitRequestFullScreen) {
       ele.webkitRequestFullScreen();  //Chrome等
    } else if (document.msRequestFullscreen) {
       ele.msRequestFullscreen();      //IE11
    }
};



let exitFullScreen = elem => {
    let ele = elem;
    if (document.exitFullscreen) {
        ele.exitFullscreen();       //w3c标签
    } else if (document.mozCancelFullScreen) {
        ele.mozCancelFullScreen();     //FireFox
    } else if (document.webkitCancelFullScreen) {
        ele.webkitCancelFullScreen();  //Chrome等
    } else if (document.msExitFullscreen) {
        ele.msExitFullscreen();      //IE11
    }
};

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>video</title>
		<style>
			#content,#content1{
				width:650px;
				height:420px;
				border:1px solid greenyellow;
				margin:40px auto;
				display:block
			}
		</style>
	</head>
	<body>
		<video src="demo.mp4" id="content" poster="apple.jpg" controls></video>
		<button id="btn">控制</button>
	</body>
</html>
<script type="text/javascript">
	let btn =document.querySelector("#btn")
	let content=document.querySelector("#content")
</script>

<video
  id="video" 
  src="video.mp4" 
  controls = "true"
  poster="images.jpg" /*视频封面*/
  preload="auto" 
  webkit-playsinline="true" /*这个属性是ios 10中设置可以
                     让视频在小窗内播放，也就是不是全屏播放*/  
  playsinline="true"  /*IOS微信浏览器支持小窗内播放*/ 
  x-webkit-airplay="allow" 
  x5-video-player-type="h5"  /*启用H5播放器,是wechat安卓版特性*/
  x5-video-player-fullscreen="true" /*全屏设置，
                     设置为 true 是防止横屏*/
  x5-video-orientation="portraint" //播放器支付的方向， landscape横屏，portraint竖屏，默认值为竖屏
  style="object-fit:fill">
</video>

大文件会以blob:http来展示资源，而且状态码可能是206表示持续传输; blob:https并不是一种协议，而是html5中blob对象在赋给video标签后生成的一串标记，blob对象对象包含的数据，浏览器内部会解析

原文链接 (opens new window)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Blob Url</title>
</head>
<body>
    <video id="video" width="400" controls="controls"></video>
    <script type="text/javascript">
        //创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        //配置请求方式、请求地址以及是否同步
        xhr.open('POST', '/index.php', true);
        //设置请求结果类型为blob
        xhr.responseType = 'blob';
        //请求成功回调函数
        xhr.onload = function(e) {
            if (this.status == 200) {//请求成功
                //获取blob对象
                var blob = this.response;
                //获取blob对象地址，并把值赋给容器
                document.getElementById("video").src = URL.createObjectURL(blob);
            }
        };
        xhr.send();
    </script>
</body>
</html>

我们只是实例讲解下如何生成 blob 资源地址，生产中是很少会将一个资源以二进制流的方式返回给前端进行 Blob “加密”的，因为服务端需要将相应的资源打开读取，会消耗对应的内存，比如一个视频如果50M，那我们服务端返回其二进制数据时，就要消耗 50M 的服务器内存将文件载入，然后返回给前端，这代价略大，而且网络传输相应速度也不允许，如果返回个 500M 的二进制数据，估计就会有很大的卡顿了。

生产场景往往是对切片格式的视频 m3u8 地址进行 blob 格式处理，其实并不是为了加密，因为浏览器还是会解析 blob 并去 get 请求对应的 m3u8 地址，使用 blob uri 的好处在于可以在一定层度上干扰爬虫。

# video样式插件

video.js 地址 (opens new window)

# audio

<audio id="myAudio"></audio>
<script>
	var myAudio = document.getElementById('myAudio');
	myAudio.src = '../content/audio/海阔天空.mp3';
	myAudio.play();
	myAudio.loop = true;
	myAudio.preload = true;
	myAudio.currentTime
</script>

var currentFile = '../content/audio/海阔天空.mp3';
//判断浏览器是否支持audio
if (!window.HTMLAudioElement) {
alert('您的浏览器不支持audio标签');
} else {
var myAudio = document.getElementById('myAudio');
//播放/暂停按钮
$('#playBtn').click(function () {
    var icon = $(this).find('i');
    //播放
    if (myAudio.paused) {
        //如果延迟指定src的话，会在播放前有较长的等待
        if (myAudio.src.length <= 0) {
            myAudio.src = currentFile;
        }
        myAudio.play();
        icon.removeClass('glyphicon-play').addClass('glyphicon-pause');
    } else {
        myAudio.pause();
        icon.addClass('glyphicon-play').removeClass('glyphicon-pause');
    }
});
//静音按钮
$('#mutedBtn').click(function () {
    var icon = $(this).find('i');
    icon.toggleClass('glyphicon-volume-down').toggleClass('glyphicon-volume-off');
    myAudio.muted = !myAudio.muted;
});
//音量按钮
$('#volume').slider({
    value: myAudio.volume * 100
}).on('change', function (e) {
    var value = e.value.newValue / 100;
    myAudio.volume = value;
});
$('#changeBtn').click(function () {
    //使用在线文件
    myAudio.src = 'http://xxxx';
    myAudio.play();
});
//监听事件
myAudio.oncanplay = function () {
    console.info('进入可播放状态,音频总长度:' + myAudio.duration);
}
myAudio.onplay = function () {
    console.info('开始播放：' + myAudio.currentTime);
}
myAudio.onpause = function () {
    console.info('暂停播放：' + myAudio.currentTime);
}
myAudio.onprogress = function () {
    //console.info(myAudio.buffered);
    //console.info('正在播放：' + myAudio.currentTime);
}
myAudio.ontimeupdate = function (e) {
    console.info('播放时间发生改变：'+myAudio.currentTime);
}
}

# video.js

poster:封面

<head>
  <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>

<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg" 
    data-setup="{}"
  >
    <source src="MY_VIDEO.mp4" type="video/mp4" />
    <source src="MY_VIDEO.webm" type="video/webm" />
    <p class="vjs-no-js">
      To view this video please enable JavaScript, and consider upgrading to a
      web browser that
      <a href="https://videojs.com/html5-video-support/" target="_blank"
        >supports HTML5 video</a
      >
    </p>
  </video>

  <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
</body>

# videojs支持流媒体

# HLS：基于HTTP的自适应码率流媒体传输协议

HTTP Live Streaming,缓存ts，同时服务器建立一个m3u8的索引文件来维护最新ts片段。
一个ts片段大约10s视频，所以播放可能有延时
优点：不用考虑防火漆或者代理问题；切换码率支持度高

# RTMP

Real Time Messaging Protocol（实时消息传输协议）
延时短，可以采用在直播领域
可以加密

如果采用流媒体还需要额外的调用

<head>
  <link href="https://vjs.zencdn.net/7.17.0/video-js.css" rel="stylesheet" />

  <!-- If you'd like to support IE8 (for Video.js versions prior to v7) -->
  <!-- <script src="https://vjs.zencdn.net/ie8/1.1.2/videojs-ie8.min.js"></script> -->
</head>
<body>
  <video
    id="my-video"
    class="video-js"
    controls
    preload="auto"
    width="640"
    height="264"
    poster="MY_VIDEO_POSTER.jpg" 
    data-setup="{}"
  >
    <!-- 地址，不需要配置type -->
    <source src="http://ivi.bupt.edu.cn/hls/cctv1hd.m3u8" />
  </video>

  <script src="https://vjs.zencdn.net/7.17.0/video.min.js"></script>
  <script>
    //   调用video.js，传参1：videoid，2：配置项，3：回调函数
    var player = videojs('my-video',{},function(){})

  </script>
</body>

← localStorage select和option →