使用videojs实现视频播放

最新推荐文章于 2024-08-20 22:59:20 发布

milijiangjun

最新推荐文章于 2024-08-20 22:59:20 发布

阅读量7.3k

点赞数 3

分类专栏：声明

本文链接：https://blog.csdn.net/milijiangjun/article/details/108680222

版权

本文介绍了如何使用video.js实现视频播放功能，包括初始化video.js的两种方法，播放按钮居中设置，支持audio标签，禁止在iPhone Safari中自动全屏，暂停时显示播放按钮，播放按钮形状调整，点击屏幕播放/暂停以及重新载入视频文件的方法。同时提到了CSS的pointer-events属性在控制交互中的作用。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>前端播放m3u8格式视频</title>
    <title>https://blog.csdn.net/qq_30282133/article/details/81566273</title>
    <!-- https://blog.csdn.net/qq_30282133/article/details/81566273 -->
    <link href="video-js.css" rel="stylesheet">
    <script src='video.js'></script>
    <script src="video.min.js" type="text/javascript"></script>
<!--    <style type="text/css" src="video-js7.4.1.css" ></style>
    <script type="text/javascript" src = "video/video7.4.1.js" ></script>
    <script type="text/javascript" src = "video/videojs-contrib-hls.min.js" ></script> -->
    
   <!--  
   
     -->
    <!-- videojs-contrib-hls 用于在电脑端播放 如果只需手机播放可以不引入 -->
</head>
<body>
    <style>
        .video-js .vjs-tech {
   position: relative !important;}
        .video-js .vjs-time-control{
   display:block;}
.video-js .vjs-remaining-time{
   display: none;}
    </style>
    <div style="width: 400px; height: 350px;" >
        <video id="myVideo" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" data-setup='{}' style='width: 100%;height: auto'>
            <source id="source" src