video标签动态设置src

最新推荐文章于 2024-05-15 12:27:46 发布

原创最新推荐文章于 2024-05-15 12:27:46 发布 · 4.4k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#html5

移动端专栏收录该内容

2 篇文章

订阅专栏

本文介绍如何使用JavaScript操作HTML5的video标签，实现为视频播放器设置不同格式的视频源文件，包括ogg、mp4和webm等格式，并展示了如何通过代码让video元素正确显示。

<video width="300" height="250" controls style="display: none;margin: auto;" id="videos">
        <source type="video/ogg" src=''/>
        <source type="video/mp4" src='' />
        <source type="video/webm" src='' /> 
    </video>

let dom = document.getElementById('videos')
dom.style.display = 'block'
dom.src = fileUrl

注意：给video元素的id赋src的值，不是给source元素。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

drunk喵咪

关注关注

4
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue3 videojs实现播放器，动态更改src

在职可交流前端开发，包括：web端、uniapp等，欢迎指教。

08-17

4999

1.vue框架更改对应数据data，对应的视图view变化。2.在封装的组件监听传参src的变化，如果点击的 src和之前的不同，进行切换资源，播放器重新加载播放；3.播放器的资源source的参数有src+type，注意type可以不设置。推荐用法：不设置type，如果要设置一定要更传过来的视频流的数据格式保持一致，否则会爆红。

解决vue 异步获取接口数据动态绑定 video标签src属性失效的问题方法集合

我总是词不达意的博客

05-23

3818

动态绑定 video标签src属性失效

参与评论您还未登录，请先登录后发表或查看评论

<video>标签：视频播放器动态设置src

qq_42988813的博客

01-03

3980

<video>标签：视频播放器动态设置src HTML代码 <div id="my_div"><videoid="my_video" width="600"height="300"controls >　　<source src="" ></video></div> ...

vue中动态绑定video的src

qq_44839030的博客

01-04

3851

Vue中动态绑定video的src <video :src="url" style="width: 200px; height: 300px;" controls></video> 本地的视频（本地的视频，动态绑定的时候，地址需要用require包起来） return { url: require("../assets/promotionalVideo.mp4") }; 线上的视频（获取video的DOM元素，为元素的src赋值） this.$refs.vid

视频边下边播

wolaikanyanhau的博客

03-10

2721

采用ios7以后系统自带的方法实现视频边下边播，这里的边下边播不是单独开一个子线程去下载，而是把视频播放的数据给保存到本地。简而言之，就是使用一遍的流量，既播放了视频，也保存了视频。用到的框架：AVFoundation/AVFoundation.h> 用到的播放器：AVplayer 先说一下avplayer自身的播放原理，当我们给播放器设置好url等一些参数后，播放器就会向url所在的

html5 video src参数,vue 中使用html5 video标签动态获取src报错

weixin_27038261的博客

06-29

1136

在使用vue并配合elementUI开发中，将video放到一个弹窗插件中，页面的渲染正常，能够获得src，但是控制台报：GET http://xxxx.xxx.xxxx.com/vide... 403 (Forbidden)碰撞上传上传记录{{phone}}{{num}}{{ scope.row.createdDateStr }}{{ scope.row.size }}{{activeBtn}}...

为video标签动态添加src

08-26

首先，要获取video标签的引用，然后通过设置其src属性来动态更改视频的来源。例如，假设你有一个video标签的id为"myVideo"，你可以通过以下方式来动态添加src属性： ```javascript // 获取video标签的引用 var ...

H5的video标签跨域.HTML的video标签跨域_跨域ajax

12-24

H5的video标签跨域.HTML的video标签跨域我们都知道HTML video标签能播放视频但是如果你的video要播放的是非当前域名下的视频文件,这就要跨域播放视频, 应该如何实现呢?

html5用video标签流式加载的实现

11-20

浏览器的video标签通常是接收一个src属性，然后浏览器就会根据这个src属性来自动加载视频。这个过程是浏览器来加载video的。这种方式有什么问题吗？ mp4文件不能流式加载 webm，flv，hls等格式兼容性问题 ...

精选资源

禁止iPhone Safari video标签视频自动全屏的办法

01-20

总之，虽然无法直接禁止iPhone Safari中的`<video>`标签视频自动全屏，但可以通过结合使用`webkit-playsinline`属性以及在App环境中调整设置来达到类似的效果。对于Web环境，开发者可能需要寻找其他变通方法，或者...

html5 src直播地址,vue 中使用html5 video标签动态获取src报错

weixin_29061425的博客

05-31

458

Html5 video 标签 src 用数据流方式播放视频

zby18638890018的博客

06-28

5269

在上面的代码中，首先使用 fetch 方法获取视频数据流并以 Blob 对象形式返回，然后使用 URL.createObjectURL() 方法创建一个 URL 对象，将 Blob 对象作为参数传入该方法。最后将创建的 URL 对象赋值给 video 标签的 src 属性即可实现使用数据流播放视频。

html中video获取src,HTML Video src用法及代码示例

weixin_42494628的博客

06-19

3694

Video src属性用于设置或返回视频的src属性的值。 src属性通常用于指定视频文件的位置(URL)。用法:返回src属性：videoObject.src设置src属性：videoObject.src = URL属性值：URL:用于指定视频文件的URL。返回值：Video src属性返回一个字符串，该字符串代表视频文件的URL。 src属性返回整个URL，包括协议。以下示例程序旨在说明Vid...

H5 通过jquery动态的设置video src的值无法播放视频

码农之路

01-24

5208

<video id="my-player1" class="video-js vjs-default-skin vjs-big-play-centered h5video" controls preload="auto" autoplay="autoplay" poster="//vjs.zencdn.net/v/oceans.png" data-setup='{"te

Vue使用video组件src动态本地传值

Hobart_Y的博客

05-15

706

vue视频组件本地动态 :src传值

video标签的src和srcObject属性的区别

weixin_54607676的博客

03-14

2272

在HTML的标签中，src和srcObject是两个不同的属性。srcsrcsrcObjectsrcObject总结srcsrcObject。

用video标签流式加载

weixin_33923762的博客

07-02

5583

video标签浏览器的video标签通常是接收一个src属性，然后浏览器就会根据这个src属性来自动加载视频。这个过程是浏览器来加载video的。这种方式有什么问题吗？ mp4文件不能流式加载 webm，flv，hls等格式兼容性问题播放器ui太丑，一些常用的功能都没有清晰度切换，等一些操作需要重载视频，比较慢而且还会黑屏无法对视频加密请求video流视频我们可以通过设置res...

vue项目中videoPlayer 的 src 视频地址参数动态修改---方法

weixin_48374341的博客

03-20

6107

方法很简单：相信大家的问题应该是改变src的值吧，动态赋值这一步简单。 this.playerOptions[‘sources‘][0][‘src‘] 就是这一步解决提取src问题，主要部分用*号框起来了。 playerOptions 参数是一个字典对吧！修改字典中的值怎么做不用多说吧直接赋值就好了，下面方法的重点就是取出src参数进行赋值。你们视频的url从数据库通过动态获取过来的时候，直接赋值给这个字典中的src就行了，赋值方法：this.playerOptions[‘sources‘][0][‘s

动态变换video标签source的src不起作用问题

最新发布

07-23

在网页开发中，使用 HTML5 的 `<video>` 标签动态绑定 `src` 属性时，可能会遇到视频无法正常显示或播放的问题。以下是几种常见的解决方案，可以帮助解决动态绑定 `src` 属性后视频无法显示的问题： ### 1. 使用 `key` 属性强制重新渲染组件在 Vue 中，可以通过给 `<video>` 标签添加 `key` 属性来强制组件在 `src` 发生变化时重新渲染。这样可以确保浏览器重新加载新的视频资源。 ```html <video :src="videoUrl" :key="videoKey"></video> ``` 当 `videoUrl` 更新后，同时更新 `videoKey` 的值，例如使用时间戳或唯一标识符[^2]。 ### 2. 使用 `source` 标签并动态更新将视频的 `src` 放置在 `<source>` 标签内，并通过 Vue 的动态绑定机制更新 `src`。同时，调用 `load()` 方法以确保浏览器重新加载视频资源。 ```html <video ref="videoPlayer" controls> <source :src="videoUrl" type="video/mp4"> </video> ``` ```javascript this.$refs.videoPlayer.src = this.videoUrl; this.$refs.videoPlayer.load(); this.$refs.videoPlayer.play(); ``` 通过手动调用 `load()` 方法，可以触发视频重新加载，从而解决动态绑定失效的问题[^3]。 ### 3. 使用原生 JavaScript 操作 DOM 在某些情况下，使用 Vue 的数据绑定机制可能无法立即更新 `<video>` 标签的 `src` 属性。此时可以考虑使用原生 JavaScript 直接操作 DOM 元素。 ```html <video id="videoPlayer" controls></video> ``` ```javascript document.getElementById('videoPlayer').src = newVideoUrl; document.getElementById('videoPlayer').load(); document.getElementById('videoPlayer').play(); ``` 通过直接操作 DOM，可以绕过 Vue 的响应式机制，确保视频资源被正确加载和播放[^4]。 ### 4. 使用第三方库（如 video.js）如果项目中需要更复杂的视频播放功能，可以考虑使用 [video.js](https://videojs.com/) 等第三方库。它们提供了更强大的功能和兼容性支持，同时也能更好地处理动态 `src` 绑定问题。 ```html <video id="myPlayer" class="video-js vjs-default-skin" controls> </video> ``` ```javascript const player = videojs('myPlayer'); player.src({ src: newVideoUrl, type: 'video/mp4' }); player.load(); player.play(); ``` video.js 提供了良好的 API 支持，可以更灵活地控制视频播放行为，尤其适用于需要高度定制的场景[^5]。 ### 5. 确保视频资源路径正确有时视频无法播放是因为资源路径不正确或服务器未正确配置 MIME 类型。需要检查以下几点： - 确保 `src` 路径是完整的 URL 或相对于当前页面的正确路径。 - 确保服务器为 `.mp4` 等视频格式配置了正确的 MIME 类型（如 `video/mp4`）。 - 如果视频托管在 CDN 上，确保 CDN 配置正确且资源可访问。 ---